如何在Bootstrap 3中获取半列？

Question

我需要在Bootstrap 3中使用2.5列和9.5列。有人能给我一个解决方案吗？我唯一找到的答案是将3列分为一组。我需要2个半列。

- user3701008

---

你应该为此编写自定义宽度样式。 - ersnh

http://getbootstrap.com/css/#grid-options - Sean Murrin

我只是在这里留下了这个链接：https://dev59.com/v2Ag5IYBdhLWcg3w9e0y#22986836 - Raisch

Answer 1

如果您正在使用Bootstrap的Sass文件，可以按照以下方式进行操作：

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

这个解决方案与Ardee Aram的解决方案类似，但是利用了Bootstrap的$grid-columns变量。

- isxpjm

---

我用LESS做了类似的事情： .col-sm-push-half{ &:extend(.col-sm-push-1); left: percentage((1.5 / @grid-columns)); } - Confidant

Answer 2

我使用这段代码来生成半列：

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

如果你有疑问，一列是100％/ 12 = 8.3333％。因此，半列是这个值的一半。

- Ardee Aram

---

8.333的一半约等于4.167。 - maschwenk

感谢@maschwenk！我编辑了我的回答。 - Ardee Aram

Answer 3

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

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

无论如何，这是一个可以玩耍的东西... :)

- timgavin