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

77

我想知道是否有人可以解释如何在引导程序中获得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

谁能解释这是否可能，或者我是否必须坚持偶数？

html  css  twitter-bootstrap  twitter-bootstrap-3 
— 吉米
source
为什么将此帖子标记为“ jquery”问题？这会导致问题的索引编制错误，即使<title>Stackoverflow为该帖子生成的也是：“ jquery-引导程序中有7个相等的列-Stack Overflow”。
— 马里亚诺·鲁伊斯

Answers:

144

好吧，IMO，您可能需要width使用CSS3@media查询来覆盖列的。

这是我创建7列网格系统的尝试：

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

运行代码段，然后单击“整页”。

显示代码段

其他选择

另外，您可以使用“自定义生成器”来构建自己的7列版本的Twitter Bootstrap （更改@grid-columns，...）。

如果您使用的编译器较少，则可以下载较低版本的Twitter Bootstrap（从Github）并编辑该variables.less文件。

— 哈希姆·夸拉米
source
3
+1为自定义生成器。在一周中的几天中，我需要7列行，而在几个月中我需要12列行，因此，我创建了一个84列的引导程序，它很好用。css文件虽然更大。
— 尼玛2014年
伟大的工作，你身边，你还可以添加一个@media (max-width: 768px)设置为width = 100%，并留下@media (min-width: 768px)了width = 50%。
— 吉瓦尔2016年
为什么将* width与width的值相同？我认为* width用于为IE7或波纹管设置不同的值。
— PhoneixS
即使在提供的演示中，这对我也不起作用。
— DLeh
1
当在for循环中添加列时，这不起作用。知道如何解决吗？
— Priyanka
33

一个几乎相等，快速的解决方案。没有自定义的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>
展开摘要

— PJ3
source
您如何找到必须要做的部门？
— PhoneixS
17

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

带有用于等宽列的类col 

<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://v4-alpha.getbootstrap.com/layout/grid/#equal-width

提示：如果要在屏幕低于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>
— 安东尼·吉布斯
source
10

我想要一个更精确的解决方案，所以我制作了一个特殊的行/列类集（与日历的概念密切相关）。

这消除了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);
}
— 布拉德
source
7

按照安东尼·吉布斯的回答，您可以简单地使用Boostrap 4“ col ” 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，您始终可以简单地将BS4中的css声明复制到自己的样式表中。

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

— 贝朗格
source
4

您的问题是列数奇数，因此无法实现对称。因为每一列都是一周中的某一天，所以您可以说所有工作日都有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>

演示在这里

— 塔索斯（Tasos K.）
source
3

@Brad，您的回答是出色而优雅的，对于使用sass的用户，我做了一些修改。请注意，代码中的注释不是我的，它们只是github bootstrap代码库中的注释。我保留了它们以供参考。

的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);
}
— 赞德里
source
BS4中不错的redux
— Brad
1

我用一种简单的方法解决了。我只使用了引导程序的合理按钮组，仅使用了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>
— 卡特琳娜·卡兹
source
1

万一您需要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);
  }
}
— 吴
source
1

您需要将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>

具有与cols相同的效果，但是对于逐案的情况，它的速度更快，在这种情况下，您需要通过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>";
— 阿尔潘·杜比
source
1

如果您不必使用宽度的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>
— 盗贼
source
1

您已经在使用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();
}

编译my_custom_app.scss时，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中，您只需定义包装div和列，就像默认的12列网格一样：

<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>
— 拉米拉贝尔
source
0 
<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>
— 大臣
source
0

使用Bootstrap 3的网格系统，您可以将7列包装在div中，并使用“ col-md-offset”类。例如：

<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

— 迪伦·普雷姆（Dylan Prem）
source
0

Bootstrap 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%;
  }
}
— đức钟阮
source
-3 
<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>

这样可以解决您的问题吗？初始和最后一列空间将减少，但似乎并没有太大的区别。

— 贾根
source
但是问题要求栏数相等
— Xavier
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.