html - 如何使用 bootstrap 创建左列非常窄的响应式两列布局

Question

我一直在为我的网站使用 bootstrap 响应式 12 列网格布局。

我有如下布局(出于示例目的的精简版)

<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-1'>
      Left side contents go here
    </div>
    <div class='col-md-11'>
      Right side contents go here
    </div>
  </div>
</div>

我现在需要的是左侧栏比我想要的要宽。如何使其变窄并仍然使用 Bootstrap 布局？

感谢任何帮助!

Answer 1

一个干净的解决方案是自定义 bootstrap 以包含更多列，就像这个答案:

How to use bootstrap with 16 or 24 columns

其他替代方案是使用嵌套行，但这最终可能会出现未使用空间等问题，因此我的建议是自定义 Bootstrap 。