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-left 30px并设置为float:left，因此您只需要指定margin-right和width属性。

这是因为[class*="span"]

中的bootstrap.css选择器

在这个例子中，我设置了52px的右边距以保持网格系统，但是如果你不想浪费空间，可以将它改为10px。

如何让Bootstrap网格跨度比span1更窄？

1 个答案: