我可以在引导程序中给出col-md-1.5吗？

Question

我想调整Twitter Bootstrap中的列.

我知道在bootstrap中有12列网格.有没有办法操纵网格有1.5 3.5 3.5 3.5而不是3 3 3 3？

Answer 1

你云也简单地覆盖了列的宽度......

<div class="col-md-1" style="width: 12.499999995%"></div>

由于col-md-1宽度为8.33333333%; 只需乘以8.33333333*1.5并将其设置为您的宽度.

Answer 2

正如@ bodi0正确地说,这是不可能的.你要么必须扩展Bootstrap的网格系统(你可以搜索和找到各种解决方案,这里是一个7列示例)或使用嵌套行,例如http://bootply.com/dd50he9tGe.

在嵌套行的情况下,您可能并不总是得到确切的结果,而是类似的结果

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Answer 3

简短的回答是否定的(从技术上讲,你可以提供你想要的任何类的名称,但这将没有任何效果,除非你定义自己的CSS类 - 并记住 - 类选择器中没有点).长期的答案是否定的,因为Bootstrap包括一个响应式,移动的第一流体网格系统,随着设备或视图端口大小的增加,可以适当地扩展到12列.

行必须放在.container(固定宽度)或.container-fluid(全宽)内,以便正确对齐和填充.

• 使用行创建水平列组.
• 内容应放在列中,只有列可以是行的直接子项.
• 义电网类,如.row以及.col-xs-4可用于快速进行网格布局.较少的mixin也可用于更多语义布局.
• 列通过填充创建装订线(列内容之间的间隙).该填充通过负边距在第一列和最后一列的行中偏移.rows.
• 通过指定要跨越的十二个可用列的数量来创建网格列.例如,三个相等的列将使用三个.col-xs-4.
• 如果在一行中放置超过12列,则每组额外列将作为一个单元包裹到新行上.
• 网格类适用于屏幕宽度大于或等于断点大小的设备,并覆盖针对较小设备的网格类.因此,例如,将任何.col-md-*类应用于元素不仅会影响其在中型设备上的样式,而且还会影响大型设备(如果.col-lg-*不存在类).

你的问题的一个可能的解决方案是定义你自己的具有所需宽度的CSS类,假设.col-half{width:XXXem !important}然后将这个类添加到你想要的元素以及原始的Bootstrap CSS类.

Answer 4

Bootstrap 4 使用 flex-box，您可以创建自己的列定义

这接近于 1.5，根据您自己的需要进行调整。

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Answer 5

我创建了一个自定义引导扩展，允许您使用以下类：

// replace * with a number between 0 and 11
col-*-1qtr
col-*-half
col-*-3qtr

另请注意，您可以使用响应式类，例如：

• col-sm-2-half(2.5)
• col-md-0-3qtr(0.75)
• col-lg-11-1qtr(11.25)
• col-xl-5-half(5.5)

这是一个例子：

// replace * with a number between 0 and 11
col-*-1qtr
col-*-half
col-*-3qtr