twitter-bootstrap 如何获得比span1更窄的Bootstrap网格跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13837287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Bootstrap grid spans narrower than span1?
提问by Dan Gravell
I have a five column grid. I've initially set them up as so:
我有一个五列网格。我最初是这样设置的：
<div class="row">
<div class="span1">...</div>
<div class="span3">...</div>
<div class="span1">...</div>
<div class="span4">...</div>
<div class="span1">...</div>
</div>
The first column contains one of two icons, both of the same width: 18px. span1 resolves to 60px, however, so there's a lot of wasted space.
第一列包含两个图标之一，宽度相同：18px。但是，span1 解析为 60px，因此浪费了很多空间。
How do I declare a column that's 18px?
如何声明一个 18px 的列？
This only affects one page of my app, so it's not enough to customise the entire Bootstrap CSS, right?
这只会影响我的应用程序的一页，所以自定义整个 Bootstrap CSS 是不够的，对吗？
回答by Charles-édouard Coste
You can add your own class:
您可以添加自己的类：
...
.myspan {
width:18px;
margin-right:52px;
}
...
Then add the class to your tag:
然后将类添加到您的标签中：
<div class="row">
<div class="myspan">...</div>
<div class="span3">...</div>
<div class="span1">...</div>
<div class="span4">...</div>
<div class="span1">...</div>
</div>
Or even use inline css (but it's less clean)
或者甚至使用内联 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>
Every class containing "span" will get a margin-leftof 30px and be set as float:leftso you just need to specify the margin-right and width properties.
每个包含“span”的类都将获得margin-left30px 的值并设置为float:left您只需要指定 margin-right 和 width 属性。
This is because of the [class*="span"]selector in bootstrap.css
这是因为[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.
在这个例子中，我将右边距设置为 52px 以保持网格系统，但如果您不想浪费空间，您可以将其更改为 10px。
