css - 引导列宽度问题

Question

好吧，我将列宽自定义为 75px。

如果我有这个

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1">some text</div>
    </div>
</div>

该列具有正确的宽度，但如果我有这个

<div class="container-fluid">
    <div class="span1">some text</div>
</div>

该列具有不同的宽度。

Answer 1

发生这种情况是因为.row-fluid .span*宽度是一个百分比。如果您调整窗口浏览器的大小，您将看到列宽发生变化，在本例中为 span1。

要始终保持 75px 到 span1，请放入您的自定义 css

.row-fluid .span1{
    width: 75px !important;
    *width: 75px !important;
}

Answer 2

网格系统通常遵循严格的层次结构来创建布局。

Twitter bootstrap 期望您的所有列都保留在行内。为引导程序编写的 CSS 根据您给出的层次结构使用后代选择器。因此，如果您更改层次结构，将应用的规则将有所不同。

从 bootstrap css 中提取后可以对相同的内容有所了解。

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    //Other properties removed for readability
}

.row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
}

.row-fluid .span11 {
    width: 91.48936170212765%;
    *width: 91.43617021276594%;
}

.row-fluid .span10 {
    width: 82.97872340425532%;
    *width: 82.92553191489361%;
}

.row-fluid .span9 {
    width: 74.46808510638297%;
    *width: 74.41489361702126%;
}

.row-fluid .span8 {
    width: 65.95744680851064%;
    *width: 65.90425531914893%;
}

.row-fluid .span7 {
    width: 57.44680851063829%;
    *width: 57.39361702127659%;
}

.row-fluid .span6 {
    width: 48.93617021276595%;
    *width: 48.88297872340425%;
}

.row-fluid .span5 {
    width: 40.42553191489362%;
    *width: 40.37234042553192%;
}

.row-fluid .span4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%;
}

.row-fluid .span3 {
    width: 23.404255319148934%;
    *width: 23.351063829787233%;
}

.row-fluid .span2 {
    width: 14.893617021276595%;
    *width: 14.840425531914894%;
}

.row-fluid .span1 {
    width: 6.382978723404255%;
    *width: 6.329787234042553%;
}