如何在Bootstrap 3中获得半列？

Question

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

Answer 1

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

{{1}}

这与Ardee Aram的解决方案类似，但使用了bootstrap $ grid-columns变量。

Answer 2

想知道创建嵌套列是否有效？

<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/

无论如何都要玩......：）

Answer 3

我使用此代码生成半列：

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

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