半自动引导
引导定制:
实际上引导是建立在Less,还它们提供Sass动态管理CSS。 Less/Sass是CSS预处理器语言(它允许变量,函数等)。 较少文件已包含在较少文件夹内的主要Source code中。
按照选项1或选项2(我宁愿选择2)
选项-1(本地):
打开variables.less
少的文件夹中,找到@grid-columns: 12;
(325线)。 更改为@grid-columns: 24;
保存并编译boostrap.less文件有任何减少的编译器(koala)。
编译后你会得到.css文件。
选项-2(在线):
您也可以从引导的官方网站做去http://getbootstrap.com/customize
确保所有复选框被选中。 更改@grid-columns
12
到24
下网格系统部分。 然后从下方点击“编译和下载”按钮下载。在你的项目中使用这个生成的CSS。
工作原理:
现在,你必须使用24列格
(ex: 100% width=col-md-24)
而不是12列格。
<div class="row">
<div class="col-md-9"></div> //Same as 4.5
<div class="col-md-6"></div> // Same as 3
<div class="col-md-9"></div> //same as 4.5
</div>
感谢
感谢您的回答,但我不想更改我网站的其他部分。 – fullOfQuestion
好的。然后,您可以使用自定义CSS并使用%设置宽度。 – AHJeebon
但我希望它是响应,例如在移动的col-xs-12 – fullOfQuestion
如果您使用以下/ SCSS,你有升压电路,你可以使用被写入引导的混入/功能。若要使COL-XS-4.5,你可以做...
// SCSS
.col-xs-4-5 {
@include make-xs-column(4.5);
}
// LESS
.col-xs-4-5 {
.make-xs-column(4.5);
}
或者,你可以重新创建它自己的...
.col-xs-4-5 {
position: relative;
float: left;
width: 20%;
padding-left: 15px;
padding-right: 15px;
}
如果你只有4.5列的需要,你可以将其添加喜欢..
.col-md-4-5 {
width:37.5;
}
而且使用它像:
<div class="col-md-4 col-md-4-5">
</div>
您可以修改列的引导号码,获得你想要的东西:http://getbootstrap.com/customize/Ø用百分比创建它。 –
Bootstrap不提供半列布局。您需要覆盖自定义css文件中的样式来实现此目的。 –
col-md-3然后将左右边的边距设置为40%我认为。 –