引导程序列宽问题
引导程序列宽问题
提问于 2013-07-10 15:21:56
好吧，我将列宽自定义为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>该列具有不同的宽度。
回答 2
Stack Overflow用户
发布于 2013-07-10 15:30:59
发生这种情况是因为.row-fluid .span*宽度是一个百分比。如果调整窗口浏览器的大小，您将看到列宽发生了变化，在本例中为span1。
要始终保持75px到span1，请输入您的自定义css
.row-fluid .span1{
width: 75px !important;
*width: 75px !important;
}Stack Overflow用户
发布于 2013-07-10 15:32:00
网格系统通常遵循严格的层次结构来创建布局。
Twitter bootstrap要求您的所有列都保存在行中。为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%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17564654
复制相关文章
相似问题
腾讯云开发者
