自举中7个相同的列
我想知道是否有人可以解释如何在bootstrap中获得7个相同的列？ 我正在做一个日历。 这段代码似乎做了5：
div class="row"> <div class="col-md-2 col-md-offset-1"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> </div> 我的主要内容有以下课程，所以我希望7列可以坐在这里：
COL-LG-12
任何人都可以解释，如果这是可能的，或者如果我必须坚持甚至数字？
那么，国际海事组织您可能需要通过使用CSS3 @media查询覆盖列的width 。
这是我尝试创build一个7-col网格系统：
<div class="container"> <div class="row seven-cols"> <div class="col-md-1">Col 1</div> <div class="col-md-1">Col 2</div> <div class="col-md-1">Col 3</div> <div class="col-md-1">Col 4</div> <div class="col-md-1">Col 5</div> <div class="col-md-1">Col 6</div> <div class="col-md-1">Col 7</div> </div> </div>
@media (min-width: 768px){ .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 100%; *width: 100%; } } @media (min-width: 992px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; } } /** * The following is not really needed in this case * Only to demonstrate the usage of @media for large screens */ @media (min-width: 1200px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; } }
width的值来自：
width = 100% / 7 column-number = 14.285714285714285714285714285714%
工作演示
其他选项
此外，您可以使用自定义构build器 （更改@grid-columns ，…）构build自己的7个专栏的Twitter Bootstrap版本。
如果您使用的编译器较less ，则可以下载较less版本的Twitter Bootstrap（来自Github ），然后编辑variables.less文件。
一个几乎相等的 快速解决scheme。 没有自定义的CSS。
<div class="col-md-4"> <div class="row"> <div class="col-md-4"></div> <!-- this column empty --> <div class="col-md-4"> 1 </div> <div class="col-md-4"> 2 </div> </div> </div> <div class="col-md-8"> <div class="row"> <div class="col-md-2"> 3 </div> <div class="col-md-2"> 4 </div> <div class="col-md-2"> 5 </div> <div class="col-md-2"> 6 </div> <div class="col-md-2"> 7 </div> <div class="col-md-2"></div> <!-- this column empty --> </div> </div>
我想要一个更精确的解决scheme，所以我做了一个特殊的行/ col类集（语义上绑定到日历的概念）。
这剥离了Bootstrap构build基础网格的方式（在grid-framework.less ）。 它保留了用于在不同视口处定制网格的xs ， sm ， md和lg类。
注意：这只是包括网格样式; 您仍然需要编写其余的内容才能使其看起来像日历。
标记
<div class="row"> <div class="col-xs-7"> <div class="calendar"> <div class="calendar-row"> <div class="calendar-xs-1">Sunday</div> <div class="calendar-xs-1">Monday</div> <div class="calendar-xs-1">Tuesday</div> <div class="calendar-xs-1">Wednesday</div> <div class="calendar-xs-1">Thursday</div> <div class="calendar-xs-1">Friday</div> <div class="calendar-xs-1">Saturday</div> </div> </div> </div> <div class="col-xs-5"> This container intentionally left blank. </div> </div>
那个
/* * Calendar grid */ @calendar-columns: 7; @calendar-gutter-width: 0px; .make-calendar-columns() { // Common styles for all sizes of calendar columns, widths 1-12 .cal(@index) when (@index = 1) { // initial @item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}"; .cal((@index + 1), @item); } .cal(@index, @list) when (@index =< @calendar-columns) { // general; "=<" isn't a typo @item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}"; .cal((@index + 1), ~"@{list}, @{item}"); } .cal(@index, @list) when (@index > @calendar-columns) { // terminal @{list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@calendar-gutter-width / 2); padding-right: (@calendar-gutter-width / 2); } } .cal(1); // kickstart it } .float-calendar-columns(@class) { .cal(@index) when (@index = 1) { // initial @item: ~".calendar-@{class}-@{index}"; .cal((@index + 1), @item); } .cal(@index, @list) when (@index =< @calendar-columns) { // general @item: ~".calendar-@{class}-@{index}"; .cal((@index + 1), ~"@{list}, @{item}"); } .cal(@index, @list) when (@index > @calendar-columns) { // terminal @{list} { float: left; } } .cal(1); // kickstart it } .calc-calendar-column(@index, @class, @type) when (@type = width) and (@index > 0) { .calendar-@{class}-@{index} { width: percentage((@index / @calendar-columns)); } } .calc-calendar-column(@index, @class, @type) when (@type = push) and (@index > 0) { .calendar-@{class}-push-@{index} { left: percentage((@index / @calendar-columns)); } } .calc-calendar-column(@index, @class, @type) when (@type = push) and (@index = 0) { .calendar-@{class}-push-0 { left: auto; } } .calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index > 0) { .calendar-@{class}-pull-@{index} { right: percentage((@index / @calendar-columns)); } } .calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index = 0) { .calendar-@{class}-pull-0 { right: auto; } } .calc-calendar-column(@index, @class, @type) when (@type = offset) { .calendar-@{class}-offset-@{index} { margin-left: percentage((@index / @calendar-columns)); } } // Basic looping in LESS .loop-calendar-columns(@index, @class, @type) when (@index >= 0) { .calc-calendar-column(@index, @class, @type); // next iteration .loop-calendar-columns((@index - 1), @class, @type); } // Create grid for specific class .make-calendar(@class) { .float-calendar-columns(@class); .loop-calendar-columns(@grid-columns, @class, width); .loop-calendar-columns(@grid-columns, @class, pull); .loop-calendar-columns(@grid-columns, @class, push); .loop-calendar-columns(@grid-columns, @class, offset); } // Row // // Rows contain and clear the floats of your columns. .calendar-row { .make-row(@calendar-gutter-width); } // Columns // // Common styles for small and large grid columns .make-calendar-columns(); // Extra small grid // // Columns, offsets, pushes, and pulls for extra small devices like // smartphones. .make-calendar(xs); // Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. @media (min-width: @screen-sm-min) { .make-calendar(sm); } // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. @media (min-width: @screen-md-min) { .make-calendar(md); } // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. @media (min-width: @screen-lg-min) { .make-calendar(lg); }
这里你的问题是你有一个奇数列，因此你不能达到对称。 因为每一列都是一周中的某一天，所以你可以说所有的工作日都有col-md-2类，而另外两个则有col-md-1类。
这种方法将基于假设星期六和星期天需要更less的空间，但我不知道这是否适合您的情况。
<div class="row"> <div class="col-md-2">Mon</div> <div class="col-md-2">Tue</div> <div class="col-md-2">Wen</div> <div class="col-md-2">Thu</div> <div class="col-md-2">Fri</div> <div class="col-md-1">Sat</div> <div class="col-md-1">Sun</div> </div> <div class="row"> <div class="col-md-2">1</div> <div class="col-md-2">2</div> <div class="col-md-2">3</div> <div class="col-md-2">4</div> <div class="col-md-2">5</div> <div class="col-md-1">6</div> <div class="col-md-1">7</div> </div>
演示在这里
@Brad你的答案是辉煌而优雅的，我对那些使用sass的人稍加修改。 请注意代码中的注释不是我的，只是那些来自github引导代码库的。 我把它们留下来作为参考。
HTML
<div class="row"> <div class="col-xs-12"> <div class="calendar"> <div class="calendar-row header"> <div class="calendar-xs-1">Sunday</div> <div class="calendar-xs-1">Monday</div> <div class="calendar-xs-1">Tuesday</div> <div class="calendar-xs-1">Wednesday</div> <div class="calendar-xs-1">Thursday</div> <div class="calendar-xs-1">Friday</div> <div class="calendar-xs-1">Saturday</div> </div> </div> </div> </div>
上海社会科学院
// Calendar grid generation // $calendar-columns: 7; $calendar-gutter-width: $grid-gutter-width; // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin make-calendar-columns() { $list: ''; $i: 1; $list: ".calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}"; @for $i from (1 + 1) through $calendar-columns { $list: "#{$list}, .calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}"; } #{$list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($calendar-gutter-width / 2); padding-right: ($calendar-gutter-width / 2); } } // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin float-calendar-columns($class) { $list: ''; $i: 1; $list: ".calendar-#{$class}-#{$i}"; @for $i from (1 + 1) through $calendar-columns { $list: "#{$list}, .calendar-#{$class}-#{$i}"; } #{$list} { float: left; } } @mixin calc-calendar-column($index, $class, $type) { @if ($type == width) and ($index > 0) { .calendar-#{$class}-#{$index} { width: percentage(($index / $calendar-columns)); } } @if ($type == push) and ($index > 0) { .calendar-#{$class}-push-#{$index} { left: percentage(($index / $calendar-columns)); } } @if ($type == push) and ($index == 0) { .calendar-#{$class}-push-0 { left: auto; } } @if ($type == pull) and ($index > 0) { .calendar-#{$class}-pull-#{$index} { right: percentage(($index / $calendar-columns)); } } @if ($type == pull) and ($index == 0) { .calendar-#{$class}-pull-0 { right: auto; } } @if ($type == offset) { .calendar-#{$class}-offset-#{$index} { margin-left: percentage(($index / $calendar-columns)); } } } // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin loop-calendar-columns($calendar-columns, $class, $type) { @for $i from 0 through $calendar-columns { @include calc-calendar-column($i, $class, $type); } } // Create grid for specific class @mixin make-calendar($class) { @include float-calendar-columns($class); @include loop-calendar-columns($calendar-columns, $class, width); @include loop-calendar-columns($calendar-columns, $class, pull); @include loop-calendar-columns($calendar-columns, $class, push); @include loop-calendar-columns($calendar-columns, $class, offset); } // Row // // Rows contain and clear the floats of your columns. .row { @include make-row($calendar-gutter-width); } // Columns // // Common styles for small and large grid columns @include make-calendar-columns(); // Extra small grid // // Columns, offsets, pushes, and pulls for extra small devices like // smartphones. @include make-calendar(xs); // Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. @media (min-width: $screen-sm-min) { @include make-calendar(sm); } // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. @media (min-width: $screen-md-min) { @include make-calendar(md); } // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. @media (min-width: $screen-lg-min) { @include make-calendar(lg); }
升级到Bootstrap 4可能是一个不错的select。
与同等宽度专栏一起上课
<div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
您需要将12列自举布局分成7个相等的部分。 如果你改变CSS布局，你将面临同样的问题，把一个屏幕分成13个相同的部分，14列布局。
另外，改变列的布局也会让你做很多重新devise。 所以，我build议你用表来代替。 喜欢这个
<div class='container-fuid'> <table class='table'> <!-- add style="table-layout:fixed;" so that table do not vary in width due to text size variations --> <tr> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> </table> </div>
具有与cols相同的效果，但在个案的基础上更快，在这种情况下，您需要任意数量的相等块，以便通过PHP或其他方式在屏幕上打印。
就像在过程stream程显示中一样，下面的脚本可以让您了解如何将标准的12列屏幕分解为任意数量的列/显示单元：
$cols = 15; /* arbitary number of columns */ /* generate data array */ $data_array = array(); for($i=0 ; $i<$cols ; $i++){ $data_array[] = 'Value : '.$i ; } /* use the array to get the screen in that many columns */ echo "<div class='container'>"; echo "<table class='table'>"; echo "<tr>"; foreach($data_array as $key => $value){ echo "<td>".$value."</td>"; } echo "</tr>"; echo "</table>"; echo "</div>";
我用简单的方法解决了这个问题。 我只是使用alignmentbutton组bootstrap，只是7alignment的button，而不是实际的button，我用跨button容器div和中和不必要的类。 它看起来像这样（这也是一个每周的日历）
<div class="col-xs-12"> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group day" role="group"> <div class="btn btn-default nopadding nocurs"> <span class="day">אי</span> <span class="day">26/06</span> <div class="status">פנוי</div> </div> </div> <div class="btn-group day" role="group"> <div class="btn btn-default nopadding nocurs"> <span class="day">בי</span> <span class="day">27/06</span> <div class="status closed">מלה</div> </div> </div> <div class="btn-group day" role="group"> <div class="btn btn-default nopadding nocurs"> <span class="day">גי</span> <span class="day">28/06</span> <div class="status">פנוי</div> </div> </div> <div class="btn-group day" role="group"> <div class="btn btn-default nopadding nocurs"> <span class="day">די</span> <span class="day">29/06</span> <div class="status closed">מלה</div> </div> </div> <div class="btn-group day" role="group"> <div class="btn btn-default nopadding nocurs"> <span class="day">הי</span> <span class="day">30/06</span> <div class="status closed">מלה</div> </div> </div> <div class="btn-group day" role="group"> <div class="btn btn-default nopadding"> <span class="day">שי</span> <span class="day">31/06</span> <div class="status">פנוי</div> </div> </div> </div> </div>
以防万一你想要一个2/7或3/7列，并且你正在使用LESS CSS来进行开发。 参考： https ： //gist.github.com/kanakiyajay/15e4fc98248956614643
HTML
<div class="seven-cols"> <div class="col-md-1"></div> <div class="col-md-1"></div> <div class="col-md-3"></div> <div class="col-md-1"></div> <div class="col-md-1"></div> </div>
减
/* CSS for 7 column responsive -------------------------------------------------- */ @media (min-width: 768px){ .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1, .seven-cols .col-md-2, .seven-cols .col-sm-2, .seven-cols .col-lg-2, .seven-cols .col-md-3, .seven-cols .col-sm-3, .seven-cols .col-lg-3 { width: 100%; *width: 100%; } } @media (min-width: 992px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 100%*(1/7); *width: 100%*(1/7); } .seven-cols .col-md-2, .seven-cols .col-sm-2, .seven-cols .col-lg-2 { width: 100%*(2/7); *width: 100%*(2/7); } .seven-cols .col-md-3, .seven-cols .col-sm-3, .seven-cols .col-lg-3 { width: 100%*(3/7); *width: 100%*(3/7); } }
这是一个老问题。 但它仍然可以帮助某人。
你可以像这样安排他们：
<div class="row"> <div class="col-md-6 col-md-offset-1"> <div class="row"> <div class="col-md-3" id="Monday"></div> <div class="col-md-3" id="Tuesday"></div> <div class="col-md-3" id="Wednesday"></div> <div class="col-md-3" id="Thursday"></div> </div> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-3" id="Friday"></div> <div class="col-md-3" id="Saturday"></div> <div class="col-md-3" id="Sunday"></div> </div> </div> </div>
如果您不必使用宽度的100％，则可以将列分成9个相等的部分，并仅使用其中的部分：
<div class="row" style="border: solid 1px black; height: 200px;"> <div class="col-md-4"> <div class="row"> <div class="col-md-4 col-md-offset-4" id="Col1" style="border: solid 1px black; height: 200px;"></div> <div class="col-md-4" id="Col2" style="border: solid 1px black; height: 200px;"></div> </div> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-4" id="Col3" style="border: solid 1px black; height: 200px;"></div> <div class="col-md-4" id="Col4" style="border: solid 1px black; height: 200px;"></div> <div class="col-md-4" id="Col5" style="border: solid 1px black; height: 200px;"></div> </div> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-4" id="Col6" style="border: solid 1px black; height: 200px;"></div> <div class="col-md-4" id="Col7" style="border: solid 1px black; height: 200px;"></div> </div> </div> </div>
<div class="col-sm-12"> <div class="row"> <div class="col-xs-5"> <div class="row"> <div class="col-sm-4">01</div> <div class="col-sm-4">02</div> <div class="col-sm-4">03</div> </div> </div> <div class="col-xs-2"> <div class="row"> <div class="col-sm-12">04</div> </div> </div> <div class="col-xs-5"> <div class="row"> <div class="col-sm-4">05</div> <div class="col-sm-4">06</div> <div class="col-sm-4">07</div> </div> </div> </div> </div> </div>
<div class="row"> <div class="col-lg-1">Mon</div> <div class="col-lg-2">Tue</div> <div class="col-lg-2">Wen</div> <div class="col-lg-2">Thu</div> <div class="col-lg-2">Fri</div> <div class="col-lg-2">Sat</div> <div class="col-lg-1">Sun</div> </div>
这会解决你的问题吗？ 最初和最后一列的空间会减less，但似乎没有太大的差别。
