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>

现在我在一行中定义了两个占据4到8个占用的块，在lg，md＆amp; sm屏幕..现在我不确定如何在这种情况下使用bootstrap ...我的意思是我虽然在开始时即使在sm屏幕上也会保留4到8的占用，页面将显示水平工具栏因为这两个块需要更多空间才能在sm屏幕上占用4到8 ...但实际发生的是两个块将垂直对齐（块B上方的块A），当屏幕不再能够时将它们显示在同一行上，并且不会显示任何工具栏......所以似乎引导程序将忽略col-sm-4＆amp; col-sm-8如果两个块不适合小屏幕中的同一行..那么在这种情况下管理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>

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

1 个答案: