引导程序中的7个相等的列

小开

最佳答案

那么，我们可能需要通过使用 CSS3@media查询覆盖列的 width。

下面是我创建一个7-coll 网格系统的尝试:

<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%

工作演示-(Jsbin)

运行代码片段并单击“完整页面”。

.col-md-1 {
background-color: gold;
}


@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%;
}
}




@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%;
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<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>

其他选择

此外，你也可以使用 < a href = “ https://getbootstrap.com/docs/3.4/customize/# Grid-system”rel = “ norefrer”> Custom Builder (更改 @grid-columns，...)来构建自己的7列 Bootstrap 版本。

如果你使用的是更少编译器，你可以改为下载 Bootstrap 的更少版本(来自 Github)和编辑 variables.less文件。

小开

这里的问题是，你有奇数列，因此你不能实现对称性。因为每个专栏都是一周中的一天，你可以说所有的工作日都有 col-md-2课程，其他两个都有 col-md-1课程。

这种方法基于星期六和星期天需要更少空间的假设，但是我不知道这是否适合您的场景。

<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>

一个演示是给你

小开

我想要一个更精确的解决方案，所以我做了一个特殊的 row/colclass 集(在语义上绑定到日历的概念)。

这剥夺了 Bootstrap 构建基本网格的方式(在 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>

`.less`

/*
* 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);
}

小开

我用简单的方法解决了。我只是使用了引导对齐按钮组，只有7个对齐按钮，但是我没有使用实际的按钮，而是在按钮容器 div 中使用 span，并中和了不必要的类。它看起来像这样(它也是一个每周日历)

<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>

小开

<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>

这能解决你的问题吗？初始列空间和最后一列空间将减少，但似乎没有太大的差别。

小开

@ Brad 你的回答很精彩也很优雅，我稍微修改了一下，给那些爱顶嘴的人听。请注意，代码中的注释不是我的，它们只是来自 github 引导程序代码库的注释。我把它们原封不动地保存起来作为参考。

超文本标示语言

<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>

SASS

// 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);
}

小开

一个 几乎相等，快点解决方案。没有自定义的 css。

.cell {
border: 1px solid black;
text-align: center;
flex-basis: 33.3333%;
flex-grow: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-webkit-tap-highlight-color: #0000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>




<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4"></div> <!-- this column empty -->
<div class="col-md-4 cell"> 1 </div>
<div class="col-md-4 cell"> 2 </div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-2 cell"> 3 </div>
<div class="col-md-2 cell"> 4 </div>
<div class="col-md-2 cell"> 5 </div>
<div class="col-md-2 cell"> 6 </div>
<div class="col-md-2 cell"> 7 </div>
<div class="col-md-2"></div> <!-- this column empty -->
</div>
</div>
</div>

小开

以防万一你需要一个2/7或3/7的栏目，并且你在开发中使用较少的 CSS。参考文献: < a href = “ https://gist.github.com/kanakiyajay/15e4fc98248956614643”rel = “ nofollow”> https://gist.github.com/kanakiyajay/15e4fc98248956614643

超文本标示语言

<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);
}
}

小开

你需要把一个12列的自举布局分成7个等量的部分。如果你到处改变 css 的布局，你会面临同样的问题，比如说用14列的布局把屏幕分成13个相等的部分。

此外，更改列布局也会让你做很多重新设计。所以我建议你用桌子。像这样

<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>

具有与 protocol 相同的效果，但是对于需要在屏幕上用 PHP 或其他编程方式打印任意数量的等量块的情况，逐案处理速度更快。

就像在流程显示中一样，下面的脚本可以告诉你如何将一个标准的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>";

小开

如果你不需要使用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>

小开

升级到 Bootstrap 4可能是一个不错的选择。

带有一个用于等宽列的类 coll

<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>

Https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

提示: 当 screen 小于 md 时，如果你想在新行中断行，在每一列后面添加这个 div:

<div class='w-100 d-md-none'></div>

. w-100中断到一个新行，. d-md-done 将 div 隐藏在比 md 更宽的屏幕上

因此它会给出:

<div class="row">
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
</div>

小开

按照 Antony Gibbs 的回答，你可以简单地使用 Boostrap 4“ 上校”css 类:

<div class="row">
<div class="col">Mon</div>
<div class="col">Tue</div>
<div class="col">Wen</div>
<div class="col">Thu</div>
<div class="col">Fri</div>
<div class="col">Sat</div>
<div class="col">Sun</div>
</div>

您不一定需要 Bootstrap 4，您总是可以简单地将 css 声明从 BS4复制到您自己的样式表中。

/* Equal width */
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}


/* Add gutters */
.col {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

这样做的好处是，一旦迁移，BS4就准备好了，而且它还提供了使用5、7、9或11列的可能性。

Https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

小开

使用 Bootstrap 3的网格系统，您可以将您的7个列包装在一个 div 中，并使用“ colmd-offest”类。例如:

<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-3">
<div class="col-md-1 text-center">
<p>COLUMN ONE</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN TWO</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN THREE</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN FOUR</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN FIVE</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN SIX</p>
</div>
<div class="col-md-1 text-center">
<p>COLUMN SEVEN</p>
</div>
</div>
</div>
</div>

缺点是列大小被限制为10。如果你想让你的7列占据整个屏幕，你也可以这样做:

  <div class="row text-center">
<h1>CENTERED TEXT</h1>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN ONE</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN TWO</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN THREE</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN FOUR</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN FIVE</p>
</div>
<div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
<p>COLUMN SIX</p>
</div>
<div class="col-md-1 text-center" style="margin-left: 3%;">
<p>COLUMN SEVEN</p>
</div>
</div>
</div>

这里是密码: https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

小开

您已经在使用 Bootstrap 了，所以如果您对 SCSS 感到舒适，那么您可以利用 Bootstrap 现有的混合程序之一来创建一个定制的7列网格系统，其类的作用域为特定容器。

My _ custom_ app. scss:

//include bootstrap SCSS (for variables and mixins)
@import '../node_modules/bootstrap/scss/bootstrap';


//overwrite 2 bootstrap variables
$grid-columns: 7;
$grid-gutter-width: 4px;


//define your custom container
#task_week {
//call bootstrap's mixin
@include make-grid-columns();
}

当你编译 我的自定义应用程序的时候，Mixin 会自动生成你需要的所有的 col-x类，我在这里为那些胆小的人完整地包含了这个 CSS 文件:

    #task_week {}
#task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col-8, #task_week .col-9, #task_week .col-10, #task_week .col-11, #task_week .col-12, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm-8, #task_week .col-sm-9, #task_week .col-sm-10, #task_week .col-sm-11, #task_week .col-sm-12, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md-8, #task_week .col-md-9, #task_week .col-md-10, #task_week .col-md-11, #task_week .col-md-12, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg-8, #task_week .col-lg-9, #task_week .col-lg-10, #task_week .col-lg-11, #task_week .col-lg-12, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl-8, #task_week .col-xl-9, #task_week .col-xl-10, #task_week .col-xl-11, #task_week .col-xl-12, #task_week .col-xl,
#task_week .col-xl-auto, #task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl,
#task_week .col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2px;
padding-left: 2px; }
#task_week .col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-first {
order: -1; }
#task_week .order-last {
order: 8; }
#task_week .order-0 {
order: 0; }
#task_week .order-1 {
order: 1; }
#task_week .order-2 {
order: 2; }
#task_week .order-3 {
order: 3; }
#task_week .order-4 {
order: 4; }
#task_week .order-5 {
order: 5; }
#task_week .order-6 {
order: 6; }
#task_week .order-7 {
order: 7; }
#task_week .offset-1 {
margin-left: 14.2857142857%; }
#task_week .offset-2 {
margin-left: 28.5714285714%; }
#task_week .offset-3 {
margin-left: 42.8571428571%; }
#task_week .offset-4 {
margin-left: 57.1428571429%; }
#task_week .offset-5 {
margin-left: 71.4285714286%; }
#task_week .offset-6 {
margin-left: 85.7142857143%; }
@media (min-width: 576px) {
#task_week .col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-sm-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-sm-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-sm-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-sm-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-sm-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-sm-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-sm-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-sm-first {
order: -1; }
#task_week .order-sm-last {
order: 8; }
#task_week .order-sm-0 {
order: 0; }
#task_week .order-sm-1 {
order: 1; }
#task_week .order-sm-2 {
order: 2; }
#task_week .order-sm-3 {
order: 3; }
#task_week .order-sm-4 {
order: 4; }
#task_week .order-sm-5 {
order: 5; }
#task_week .order-sm-6 {
order: 6; }
#task_week .order-sm-7 {
order: 7; }
#task_week .offset-sm-0 {
margin-left: 0; }
#task_week .offset-sm-1 {
margin-left: 14.2857142857%; }
#task_week .offset-sm-2 {
margin-left: 28.5714285714%; }
#task_week .offset-sm-3 {
margin-left: 42.8571428571%; }
#task_week .offset-sm-4 {
margin-left: 57.1428571429%; }
#task_week .offset-sm-5 {
margin-left: 71.4285714286%; }
#task_week .offset-sm-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 768px) {
#task_week .col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-md-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-md-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-md-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-md-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-md-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-md-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-md-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-md-first {
order: -1; }
#task_week .order-md-last {
order: 8; }
#task_week .order-md-0 {
order: 0; }
#task_week .order-md-1 {
order: 1; }
#task_week .order-md-2 {
order: 2; }
#task_week .order-md-3 {
order: 3; }
#task_week .order-md-4 {
order: 4; }
#task_week .order-md-5 {
order: 5; }
#task_week .order-md-6 {
order: 6; }
#task_week .order-md-7 {
order: 7; }
#task_week .offset-md-0 {
margin-left: 0; }
#task_week .offset-md-1 {
margin-left: 14.2857142857%; }
#task_week .offset-md-2 {
margin-left: 28.5714285714%; }
#task_week .offset-md-3 {
margin-left: 42.8571428571%; }
#task_week .offset-md-4 {
margin-left: 57.1428571429%; }
#task_week .offset-md-5 {
margin-left: 71.4285714286%; }
#task_week .offset-md-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 992px) {
#task_week .col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-lg-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-lg-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-lg-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-lg-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-lg-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-lg-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-lg-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-lg-first {
order: -1; }
#task_week .order-lg-last {
order: 8; }
#task_week .order-lg-0 {
order: 0; }
#task_week .order-lg-1 {
order: 1; }
#task_week .order-lg-2 {
order: 2; }
#task_week .order-lg-3 {
order: 3; }
#task_week .order-lg-4 {
order: 4; }
#task_week .order-lg-5 {
order: 5; }
#task_week .order-lg-6 {
order: 6; }
#task_week .order-lg-7 {
order: 7; }
#task_week .offset-lg-0 {
margin-left: 0; }
#task_week .offset-lg-1 {
margin-left: 14.2857142857%; }
#task_week .offset-lg-2 {
margin-left: 28.5714285714%; }
#task_week .offset-lg-3 {
margin-left: 42.8571428571%; }
#task_week .offset-lg-4 {
margin-left: 57.1428571429%; }
#task_week .offset-lg-5 {
margin-left: 71.4285714286%; }
#task_week .offset-lg-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 1200px) {
#task_week .col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-xl-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-xl-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-xl-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-xl-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-xl-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-xl-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-xl-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-xl-first {
order: -1; }
#task_week .order-xl-last {
order: 8; }
#task_week .order-xl-0 {
order: 0; }
#task_week .order-xl-1 {
order: 1; }
#task_week .order-xl-2 {
order: 2; }
#task_week .order-xl-3 {
order: 3; }
#task_week .order-xl-4 {
order: 4; }
#task_week .order-xl-5 {
order: 5; }
#task_week .order-xl-6 {
order: 6; }
#task_week .order-xl-7 {
order: 7; }
#task_week .offset-xl-0 {
margin-left: 0; }
#task_week .offset-xl-1 {
margin-left: 14.2857142857%; }
#task_week .offset-xl-2 {
margin-left: 28.5714285714%; }
#task_week .offset-xl-3 {
margin-left: 42.8571428571%; }
#task_week .offset-xl-4 {
margin-left: 57.1428571429%; }
#task_week .offset-xl-5 {
margin-left: 71.4285714286%; }
#task_week .offset-xl-6 {
margin-left: 85.7142857143%; } }
#task_week div {
text-align: center; }
#task_week div .dow_day {
display: block;
font-size: 16px;
color: #4be4ff;
font-weight: normal; }
#task_week div .dow_date {
font-size: 12px;
display: block;
margin: 0;
margin-bottom: 10px;
font-weight: normal; }
#task_week .list-group-item, #task_week .list-group-item * {
cursor: pointer; }
#task_week .list-group-item:hover {
background-color: #161919; }
#task_week .col:not(:last-child) {
border-right: 1px solid #444;
margin-bottom: 20px; }

最后，在 HTML 中，只需像定义默认的12列网格那样定义包装器 div 和列:

<div id="task_week">
<div class="row no-gutters">
<div class="col-sm-7 col-lg-1">Monday</div>
<div class="col-sm-7 col-lg-1">Tuesday</div>
<div class="col-sm-7 col-lg-1">Wednesday</div>
<div class="col-sm-7 col-lg-1">Thursday</div>
<div class="col-sm-7 col-lg-1">Friday</div>
<div class="col-sm-7 col-lg-1">Saturday</div>
<div class="col-sm-7 col-lg-1">Sunday</div>
</div>
</div>

小开

引导程序4的更新

<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 {
max-width: 14.285714285714285714285714285714%;
flex: 0 0 14.285714285714285714285714285714%;
}
}
   

@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
max-width: 14.285714285714285714285714285714%;
flex: 0 0 14.285714285714285714285714285714%;
}
}

小开

对于“我想知道是否有人可以解释如何在 bootstrap 中得到7个相等的列?”简短的回答是否定的，引导程序提供了一个布局与12分区关于宽度。

它将工作良好，与任何 12/n = Int.，但出于这一点，它根本不能。

* 即 12/3 = 4，所以它可以做一个3项除法，这没问题。它适用于 1, 2, 3, 4, 6 and 12，但是使用 5, 7, 8, 9, 10 or 11作为除数会引起这个问题，因为12/其中任何一个等于 Float。

您将需要自定义代码来达到这个目的，因此您可以在引导类中反对重写尝试解决这个问题，或者仅仅为此创建自己的样式。Flex 在创建响应元素方面做得很好，请检查以下代码片段:

.flexrow {
display: flex;
flex-flow: row wrap;
}
 

.flexrow.row-7-el > .element  {
flex: 0 1 calc(100%/7);
max-width: calc(100%/7);
}


.outline {
outline: auto green;
}
.element {
text-align: center;
}


<div class="flexrow row-7-el">
<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>
</div>

如果你想在元素之间留出一些空间，你可以简单地将这个空间添加到计算和元素上，就像下面这样:

.flexrow {
display: flex;
flex-flow: row wrap;
}
 

.flexrow.row-7-el > .element  {
flex: 0 1 calc(100%/7  - 16px);
max-width: calc(100%/7  - 16px);
}
.element {
margin: 8px;
text-align: center;
}


.outline {
outline: auto green;
}


<div class="flexrow row-7-el">
<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>


<div class="element outline">item</div>
</div>

当然，你可以这样设置:

.flexrow.row-7-el > .element  {
flex: 0 1 calc(100%/7);
max-width: calc(100%/7);
}

在媒体查询中添加语义类名，如果希望根据视口宽度有不同的行为，比如:

@media(min-width: 360px) {
.flexrow.xs-row-7-el > .element  {
flex: 0 1 calc(100%/7);
max-width: calc(100%/7);
}
}

这样你就可以说

<div class="flexrow row-3-el xs-row-4-el md-row-6-el">

您可以使用这种方法和另一种方法给你检查完整的网格系统，在给你中，我为给定行(如您所要求的)和百分比列中的等宽项目创建了这些类。(当然，最好使用 Mixin，不要怪我，将来我会在某个地方重构它，或者不重构...)

编辑: 我刚想起来有一个叫偏移量的东西，可以让你在 Bootstrap 中处理这些情况，检查文档看看这是否也能帮到你。

小开

宽度: width: 14.285714285714285714285714285714%;

你可以很容易地设置: width: calc(100% / 7);

您可以对任意数量的列使用它

小开

在 bootstrap 4和最新的 bootstrap 5已经变得更加简单，以处理7列布局在大屏幕它将显示7项，中等屏幕它将显示3项，在小屏幕它将显示2项与中心对齐。

<div class="row justify-content-center">
<div class="col-sm-6 col-md-4 col-lg">One</div>
<div class="col-sm-6 col-md-4 col-lg">Two</div>
<div class="col-sm-6 col-md-4 col-lg">Three</div>
<div class="col-sm-6 col-md-4 col-lg">Four</div>
<div class="col-sm-6 col-md-4 col-lg">Five</div>
<div class="col-sm-6 col-md-4 col-lg">Six</div>
<div class="col-sm-6 col-md-4 col-lg">Seven</div></div>