如何使用引导程序创建左列非常窄的响应式两列布局答案

【问题标题】：How to use bootstrap to create responsive two-column layout with left column really narrow如何使用引导程序创建左列非常窄的响应式两列布局
【发布时间】：2015-11-02 01:44:05
【问题描述】：

我一直在为我的网站使用引导响应式 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 布局？

感谢任何帮助！

【问题讨论】：

那你需要使用 Flexbox。
既然是布局，你可以把你需要的宽度的容器放在单元格里面。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

一个干净的解决方案是自定义引导程序以具有更多列，例如这个答案：

How to use bootstrap with 16 or 24 columns

其他替代方法是使用嵌套行，但这可能会导致诸如未使用空间之类的问题，因此我的建议是自定义引导程序。

【讨论】：

【解决方案2】：

您可以在列中创建嵌套行例如-

 <div class="row">
    <div class="col-md-1">
       <div class="row">
          <div class="col-md-offset-9 col-md-3"><!-- offset-9 leave space in left and start in last three of column --></div>

        </div>
     </div>
     <div class="col-md-11"></div>
   </div>

【讨论】：

嵌套行浪费剩余空间，不能使用。

【解决方案3】：

您遇到的问题是网格系统如何工作的问题。他们的设计目的是描述一组固定的列宽：这些列的内容应该扩展以填充它们。您想要的是与此相反的：您希望内容定义宽度。

您实际上已经获得了三个不错的选择，并且按照从最少 -> 最好的顺序来获得您想要的最简单的标记：

接受它（或者按照建议增加列，比如 24 列）。
将两列内容放在一个块[1]中，申请display:table; width: 100%;。制作两个子项display:table-cell，在左侧使用white-space:nowrap，在右侧使用width: 99%。
将两列内容放在一个块[1]中，应用display:flex，并将flex:1应用到右侧子项。

Flex 是最好的解决方案，但如果这是一个问题，则需要 IE10+。

.container {
  max-width: 400px;
  margin: 0 auto;
}

[class^="row-"] {
  margin: 10px 0;
}

.row-1 {
  display: table;
  width: 100%;
}

[class^="col-1-"] {
  display: table-cell;
}


.col-1-left {
  white-space: nowrap;
}

.col-1-right {
  width: 99%;
}



.row-2 {
  display: flex;
}

.col-2-right {
  flex: 1;
}

<div class='container'>

  <div class='row-1'>
    <div class='col-1-left'>Some content</div>
    <div class='col-1-right'>Some content</div>
  </div>
  
  <div class='row-2'>
    <div class='col-2-left'>Some content</div>
    <div class='col-2-right'>Some content</div>
  </div>
</div>

【讨论】：