bootstrap 3.0何时/如何决定开始在小屏幕上垂直对齐DOM元素

Question

我在我的asp.net mvc-5 web应用程序中有以下示例代码，我使用的是Bootstrap3.0：

<div class="container">

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 address">
          //Block A         
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8 ">
         //Block B
        </div>


    </div>
</div>

现在，我在lg、md和sm屏幕上定义了一行中的两个区块，占用空间为4到8个。现在我不确定bootstrap在这种情况下应该如何工作。我的意思是，虽然在开始的时候，即使在sm屏幕上也会保留4到8的占有率，页面会显示一个水平工具栏，因为这两个块需要更多的空间才能在sm屏幕上有4到8的占有率……但实际发生的情况是，这两个块将垂直对齐(块A在块B之上)，当屏幕不再能够在同一行上显示它们时，并且不会显示工具栏...因此，如果这两个块不适合小屏幕中的同一行，那么bootstrap将忽略on sm-4和on sm-8。那么在这种情况下，控制Bootstrap行为的规则是什么？

Answer 1

因为您还没有在xs-screen中定义列behiver，所以bootstrap将不会对thoose div使用任何列大小，宽度将仅为auto。因为div没有宽度，所以它们将有100%，并且它们将一个接一个地放在另一个上面。

一些css框架只允许你定义一种尺寸，并且在所有屏幕尺寸下都会保留。Bootstrap不会...

您只需要添加col xs-4/8

<div class="container">

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 address">
          //Block A         
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 ">
         //Block B
        </div>


    </div>
</div>

编辑

就像@Tim Lewis所说的，因为bootstrap是移动端的，你只需定义col 4/8，它就可以在所有屏幕上工作。

<div class="container">

    <div class="row">
        <div class="col-xs-4 address">
          //Block A         
        </div>

        <div class="col-xs-8 ">
         //Block B
        </div>


    </div>
</div>