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

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

<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”部分对列进行硬编码。

您可以在此代码库中看到一个示例： https://codepen.io/jay-searra/pen/MzJvZg

如何修改此Bootstrap列堆叠行为

1 个答案: