Question

我对bootstrap 3上的流体网格布局有一个非常基本的问题。基本上我在容器内有一行。我尝试过10：2 11：1的比例并遇到同样的问题。我的布局语法是：

<div class="container">
  <div class="row clearfix">
    <div class="col-md-11 column">
      <h3 align="right">Here is a longer string.</h3>
    </div>
    <div class="col-md-1 column">
      <h3 align="right">Shorter.<h3>
    </div>
  </div>
</div>

我的问题是这个;当我减小窗口大小时，而不是非常大，这两个列堆叠在一起。它是以这种方式将列堆叠在一起的引导程序的正常行为吗？我认为，因为它们位于文本应该包装的同一行中，并且列应该彼此相邻，因为它们位于同一行中。我错了/疯了吗？感谢您抽出宝贵时间帮助我。

丹

Answer 1

您要描述的行为是有意的。它是Bootstrap响应的一个示例，其中页面的外观根据视口的大小而变化。您可以阅读有关此here的更多信息。特别是，看看这些断点：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

所以当你使用＆＃34; col-md - *＆＃34;会发生的情况是，如果视口是992px或更大，则列将正常显示（即并排显示，与其他列相邻）。如果缩小浏览器窗口，或在较小的设备中打开页面，它将以堆叠格式显示。

行堆叠的列。预期？

1 个答案: