css - 如何修改此 Bootstrap 列堆叠行为

Question

使用 Bootstrap 3.3.7，我有这个标记:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      Col 1 Main text goes here
    </div>
    <div class="col-md-3">
      Col 2 List of links to other pages here
    </div>
    <div class="col-md-3">
      Col 3 Sidebar text
    </div>
  </div>
</div>

当我减小浏览器窗口大小时，我希望第 2 列和第 3 列在第 1 列下方换行，但最初会并排显示。

相反，所有三列在第一次中断后垂直堆叠。我该如何改变这种行为？

Answer 1

对于 Bootstrap ，-md- 表示“中等”。因此，由于这是您设置的唯一大小，因此当它很小时将使用 Bootstrap 默认值。您可以使用“col-sm”和“col-md”一起使用“col-sm”来专门为屏幕变小添加不同的列号，如下所示:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      Col 1 Main text goes here
    </div>
    <div class="col-md-3 col-sm-3">
      Col 2 List of links to other pages here
    </div>
    <div class="col-md-3 col-sm-3">
      Col 3 Sidebar text
    </div>
  </div>
</div>

您还可以通过删除“-md”部分来对列进行硬编码。

你可以在这个codepen看到一个例子: https://codepen.io/jay-searra/pen/MzJvZg