半自动引导

问题描述:

如何使用引导创建类似下面的图像?半自动引导

enter image description here

+1

您可以修改列的引导号码,获得你想要的东西:http://getbootstrap.com/customize/Ø用百分比创建它。 –

+0

Bootstrap不提供半列布局。您需要覆盖自定义css文件中的样式来实现此目的。 –

+0

col-md-3然后将左右边的边距设置为40%我认为。 –

引导定制:
实际上引导是建立在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-columns1224网格系统部分。 然后从下方点击“编译和下载”按钮下载。在你的项目中使用这个生成的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> 

感谢

+0

感谢您的回答,但我不想更改我网站的其他部分。 – fullOfQuestion

+0

好的。然后,您可以使用自定义CSS并使用%设置宽度。 – AHJeebon

+0

但我希望它是响应,例如在移动的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://www.codeply.com/go/BU4GnihqmP