如何获得比 span1 更窄的 Bootstrap 网格跨度？答案

【问题标题】：How to get Bootstrap grid spans narrower than span1?如何获得比 span1 更窄的 Bootstrap 网格跨度？
【发布时间】：2012-11-30 00:16:12
【问题描述】：

我有一个五列网格。我最初是这样设置的：

<div class="row">
    <div class="span1">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

第一列包含两个图标之一，两个图标的宽度相同：18px。然而，span1 解析为 60px，因此浪费了很多空间。

如何声明一个 18 像素的列？

这只会影响我应用的一页，所以自定义整个 Bootstrap CSS 是不够的，对吧？

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

您可以添加自己的类：

...
.myspan {
    width:18px;
    margin-right:52px;
}
...

然后将类添加到您的标签中：

<div class="row">
    <div class="myspan">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

或者甚至使用内联 css（但它不太干净）

<div class="row">
    <div class="span1" style="width:18px;margin-right:52px">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

每个包含“span”的类都将获得一个 30px 的 margin-left 并设置为 float:left，因此您只需指定 margin-right 和 width 属性。

这是因为bootstrap.css 中的[class*="span"] 选择器

在本例中，我将 margin-right 设置为 52px 以保持网格系统，但如果您不想浪费空间，可以将其更改为 10px。

【讨论】：

这会弄乱响应模式下的布局。因为这个元素的宽度不会改变，其他元素会改变。
“响应模式”的 CSS 代码在响应式样式表中。显然，这也必须针对“响应模式布局”进行更新。