我有点困惑。我正在尝试将 boostrap 3 网格调整为 16 列。
我在我的 variable.less 中更改这些变量：
@grid-columns: 16;
@gridColumnWidth: 32px;
@gridGutterWidth: 30px
但是当我检查我的col-lg-12班级时，它仍然有 100% 的宽度。
问问题
3819 次
3 回答
1
将此网格生成器添加为 *.less 文件
/**
GRID GENERATOR
.grid-generator(16,20px,'mycol','myrow');
generate 16-column grid with 20px-gutter
ROW
.myrow{...}
COLUMNS
.mycol-1{...} ... .mycol-16{...}
OFFSETS
.mycol-offset-1{...} ... .mycol-offset-15{...}
PULLS
.mycol-pull-0{...} ... .mycol-pull-15{...}
PUSHS
.mycol-push-0{...} ... .mycol-push-15{...}
or for Bootstrap 3
standard bootstrap-3 grid
.grid-generator-responsive();
16-column bootstrap-3 grid with 20px gutter
.grid-generator-responsive(16, 20px);
@author: arthur.creek@gmail.com
*/
.grid-generator(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row', @offsets: true, @ordering: true){
// row container
.init-row() when (@row-name > '') {
@name: ~".@{row-name}";
@{name}{
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:before,&:after{
content: " ";
display: table;
}
&:after{
clear: both;
}
}
}
.init-row();
// common properties
.properties(@index) when (@index = @cols)
{
@name: ~".@{col-name}-@{index}";
.properties(@index - 1, @name);
}
.properties(@index, @names) when (@index > 0)
{
@name: ~".@{col-name}-@{index}";
.properties(@index - 1, ~"@{names}, @{name}");
}
.properties(@index, @names) when (@index = 0)
{
@{names}
{
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
float: left;
}
}
.properties(@cols);
// unfloat for full width
@lname: ~".@{col-name}-@{cols}";
@{lname} {
float: none;
}
// WIDTH of columns
.width(@index) when (@index > 0)
{
@name: ~".@{col-name}-@{index}";
@{name}
{
width: (100% / @cols * @index);
}
.width(@index - 1);
}
.width(@cols);
// OFFSET
.offset(@index) when (@index > 0) and (@offsets)
{
@name: ~".@{col-name}-offset-@{index}";
@{name}
{
margin-left: (100% / @cols * @index);
}
.offset(@index - 1);
}
.offset(@index) when (@index = 0) and (@offsets)
{
@name: ~".@{col-name}-offset-@{index}";
@{name}
{
margin-left: 0;
}
}
.offset(@cols - 1);
// PUSH
.push(@index) when (@index > 0) and (@ordering)
{
@name: ~".@{col-name}-push-@{index}";
@{name}
{
left: (100% / @cols * @index);
}
.push(@index - 1);
}
.push(@index) when (@index = 0) and (@ordering)
{
@name: ~".@{col-name}-push-@{index}";
@{name}
{
left: auto;
}
}
.push(@cols - 1);
// PULL
.pull(@index) when (@index > 0) and (@ordering)
{
@name: ~".@{col-name}-pull-@{index}";
@{name}
{
right: (100% / @cols * @index);
}
.pull(@index - 1);
}
.pull(@index) when (@index = 0) and (@ordering)
{
@name: ~".@{col-name}-pull-@{index}";
@{name}
{
right: auto;
}
}
.pull(@cols - 1);
}
// standard bootstrap-3 grid
// .grid-generator-responsive();
// 16-column bootstrap-3 grid with 20px gutter
// .grid-generator-responsive(16, 20px);
.grid-generator-responsive(@cols: 12, @gutter: 30px, @col-name: 'col', @row-name: 'row'){
// XS
.grid-generator(@cols, @gutter, ~"@{col-name}-xs", @row-name, false, false);
// SM
@media (min-width: 768px) {
.grid-generator(@cols, @gutter, ~"@{col-name}-sm", '');
}
// MD
@media (min-width: 992px) {
.grid-generator(@cols, @gutter, ~"@{col-name}-md", '');
}
// MD only
@media (min-width: 1200px){
.grid-generator(@cols, @gutter, ~"@{col-name}-lg", '');
}
}
并添加更少的代码
.grid-generator-responsive(16, 30px, 'col', 'row');
或使用默认值
.grid-generator-responsive(16);
它将生成具有 30px 间距的 16 列引导网格
于 2013-10-03T11:00:39.240 回答
1
列数被硬编码到 .less 文件中。@grid-columns仅用于计算宽度。
引导源代码： https ://github.com/twbs/bootstrap/blob/master/less/grid.less#L74
显然，更改列数可能会添加到版本 3.1。 https://github.com/twbs/bootstrap/issues/9436#issuecomment-22849238
于 2013-08-23T14:35:20.920 回答
0
通过在列中嵌套网格可以实现超过 12 列。我已经对此进行了试验，并提出了这个示例代码。
<body>
<div class="container">
<div class="row">
<div class="col-md-9">Nullam vehicula magna eget egestas vestibulum. Fusce sagittis vitae enim a interdum. Cras a augue placerat, laoreet nulla vel, posuere quam. Vivamus suscipit, justo at iaculis vulputate, felis ex placerat magna, at tincidunt ligula metus non ligula. Ut maximus neque quis diam aliquam, eget efficitur mauris cursus. Phasellus ultrices dui vitae porttitor fermentum. Mauris id hendrerit felis, nec pellentesque diam. Nullam pellentesque scelerisque orci eget elementum. Phasellus eget risus rhoncus, facilisis nunc sit amet, fringilla mauris. Nunc vitae ultricies nisi, at pretium tortor. Vestibulum vulputate nibh ex, vitae placerat nisi consectetur nec. Maecenas fringilla in eros nec varius. Nam at dolor finibus, porttitor quam nec, consectetur dui. Nulla rhoncus sit amet magna sed condimentum.</div>
<div class="col-md-3">Proin suscipit et urna sit amet ultrices. Morbi et tincidunt augue. Mauris ornare commodo urna quis sagittis. Phasellus egestas vehicula ex et fringilla. Curabitur tristique ultrices massa. Quisque nisl enim, malesuada eget purus id, luctus facilisis libero. Praesent ut nisl ligula. Maecenas augue velit, gravida id enim eu, feugiat laoreet orci.</div>
</div>
<div class="row">
<div class="col-md-12">Sed a dignissim mauris, eget accumsan nunc. Nullam facilisis magna orci, vel volutpat justo accumsan vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend nisi ut purus volutpat varius. Integer volutpat erat vitae imperdiet feugiat. Nullam nec luctus mi. Donec accumsan lacus mi, a aliquam elit pretium sit amet. Aenean laoreet fermentum tempor. Phasellus sagittis dui ornare, varius nisl ut, bibendum urna.</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="row"> <!-- Row nested inside a column -->
<div class="col-md-2">Proin viverra porta orci, et lacinia nisl tempus vitae. Nam a pharetra massa.</div>
<div class="col-md-2 col-md-offset-1">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div>
<div class="col-md-2">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div>
<div class="col-md-2">In sed vestibulum risus, ut malesuada nisl. Nulla cursus, enim in pretium euismod, orci est consectetur lorem, ut posuere nunc nisi vitae tellus.</div>
<div class="col-md-2 col-md-offset-1">Proin viverra porta orci, et lacinia nisl tempus vitae. Nam a pharetra massa.</div>
</div>
</div>
<div class="col-md-2 col-md-offset-1">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- Latest compiled and minified JavaScript -->
</body>
于 2015-06-18T04:49:36.557 回答