html - 如何获得比 span1 更窄的 Bootstrap 网格跨度？

Question

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

<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，因此浪费了很多空间。

如何声明一个 18px 的列？

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

Answer 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”的类都将获得margin-left30px 并设置为，float:left因此您只需要指定 margin-right 和 width 属性。

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

In this example, I set a margin-right of 52px to keep the grid system, but you can change it to 10px if you don't want wasted space.