如何在 Bootstrap 3 中获得半列？答案

【问题标题】：How to get half columns in Bootstrap 3?如何在 Bootstrap 3 中获得半列？
【发布时间】：2015-10-27 07:05:27
【问题描述】：

我在 Bootstrap 3 中需要一个 2.5 列和一个 9.5 列。有人可以给我一个解决方案吗？我找到的唯一答案是 3 列的分区。我需要 2 个半列。

【问题讨论】：

你应该为那个自定义宽度样式
getbootstrap.com/css/#grid-options
我把这个留在这里（这个得到 30 个字符）：stackoverflow.com/a/22986836/1549628

【解决方案1】：

想知道创建嵌套列是否可行？

<div class="row">
    <div class="col-sm-2" style="background:red">
        Column spans two
    </div>
</div>


<div class="row">
    <div class="col-sm-6">
        <div class="col-sm-6" style="background:pink">
        column spans 2.5
        </div>
    </div>
</div>

小提琴：https://jsfiddle.net/timgavin/5d5rvba1/

无论如何都可以玩... :)

【讨论】：

【解决方案2】：

我用这段代码生成了半列：

.col-md-half {
   @extend .col-md-1;
   width: 4.166666667%;
}

如果您想知道，列是 100% / 12 = 8.3333%。所以半列就是一半。

【讨论】：

8.333 的一半 ~= 4.167
谢谢@maschwenk！编辑了我的答案。

【解决方案3】：

如果您使用的是引导 sass 文件，您可以这样做：

.col-md-half {
   @extend .col-md-1;
   width: percentage((0.5 / $grid-columns));
}

这类似于 Ardee Aram 的解决方案，但使用了引导程序 $grid-columns 变量。

【讨论】：

我对 LESS 做了类似的事情：.col-sm-push-half{ &:extend(.col-sm-push-1);左：百分比（（1.5 / @grid-columns））； }