Bootstrap 在不同的屏幕上无法正常工作

Question

我在我的应用程序中使用 bootsrap3。在fiddle 中有 2 个 div，每个 div 用col-md-6 分为 2 个 div，第二个 div 分为 2 个 div col-md-3

第二个 div 包含 2 个图像（每个 div 有一个图像）。当小提琴全宽和全高时，图像之间没有空格，但是当小提琴稍微改变时，图像之间会出现空格并且第二个 div 也向右。

我的要求——在电脑中，我希望第一个 div 朝向左侧（包含徽标的 div）和第二个 div（包含朝向右侧的图像的 div），但在手机中我想要所有 div（第一个和第二个到一个接一个出现），但这不起作用。在此我还附上了两个屏幕截图。

在上面的scrrenshot中，logo div在左边，image div根据我的要求在右边。

现在在上面的截图中，我只是稍微改变了浏览器的宽度，这里两个 div 都向左侧移动，图像之间的空间也增加了。我在哪里做错了。

上图是手机屏幕，工作正常

这是我的html代码

<div class="container">
       <div class="row">
               <div class="col-md-6">
                       <img src="http://www.computerhope.com/logo.gif" alt="Logo"  class="round"> user
               </div>
               <div class="col-md-6 ">Recently purchased
                       <div id="slideshow">
                               <span class="images">
                                       <div class="col-md-3"><div class="box">
                                               <img src="http://lorempixel.com/150/100/abstract" />
                                                       <span class="caption simple-caption">
                                                               <p>Review</p>
                                                       </span>
                                           </div></div>
                                       <div class="col-md-3"><div class="box">
                                               <img src="http://lorempixel.com/150/100/food" />
                                                       <span class="caption simple-caption">
                                                               <p>Review</p>
                                                       </span>
                                           </div></div>
                               </span>

                                       <a class="next" href="#">Next</a>
                       </div>
               </div>
       </div>
</div>

Answer 1

如果我正确理解您的问题，您还希望定位移动设备和中型设备之间的小屏幕设备。

您还需要在此宽度下定义网格大小，因为我认为此时默认 Bootstrap 堆栈。

您可以通过使用 .col-sm-* 引用相同的网格大小来做到这一点

例如：

<div class="col-sm-6">

-编辑-

要获得所需的结果，也要定义 xs 设备，例如：

<div class="col-xs-12 col-sm-6">

Answer 2

我在我的应用程序中使用 bootsrap3。小提琴中有 2 个 div，每个 div 使用 col-md-6 分为 2 个 div，第 2 个 div 分为 2 div col-md-3

下面是我将如何去做这件事.. 在没有其他 css 的情况下尝试这个......并且只使用 bootstrap css

<div class="container">


<div class="col-sm-12">
<div class="col-sm-6"> your stuff here.. if you have image use class="img-responsive" always </div>
<div class="col-sm-6"> your stuff here.. if you have image use class="img-responsive" always </div>
</div>

<div class="col-sm-12">
<div class="col-sm-3"> your stuff here.. if you have image use class="img-responsive" always </div>
<div class="col-sm-3"> your stuff here.. if you have image use class="img-responsive" always </div>
</div></div>