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

Question

我在我的 asp.net mvc-5 web 应用程序中有这个示例代码，我在其中使用 bootstrap 3.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 个占用的两个 block .. 现在我不确定 Bootstrap 在这种情况下应该如何工作.. 我的意思是我虽然在开始即使在 sm 屏幕上，4 到 8 的职业也会被保留，并且页面将显示水平工具栏，因为这两个 block 需要更多空间才能在 sm 屏幕上拥有 4 到 8 的职业......但实际发生的是这两个 block 将垂直对齐( block A 在 block B 上方)，当屏幕不再能够在同一行显示它们时，并且不会显示工具栏......所以 Bootstrap 似乎会忽略 col-sm -4 & col-sm-8 如果两个 block 不适合小屏幕中的同一行..那么在这种情况下管理 Bootstrap 行为的规则是什么？

Answer 1

因为您没有在 xs-screens 中定义列 behiver，所以 bootstrap 不会使用任何列大小来选择 div，宽度只会自动调整。 因为 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-xs-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>