引导程序中有 7 个相等的列
Posted
技术标签:
【中文标题】引导程序中有 7 个相等的列【英文标题】：7 equal columns in bootstrap 【发布时间】：2014-03-24 04:29:17 【问题描述】：我想知道是否有人可以解释我如何在引导程序中获得 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
谁能解释这是否可能，或者我是否必须坚持使用偶数？
【问题讨论】：
为什么你把这篇文章标记为“jquery”问题？这会导致问题的索引错误，甚至 *** 为这篇文章生成的<title> 是：“jquery - 引导程序中的 7 个相等列 - 堆栈溢出”。
【参考方案1】：
对于“我想知道是否有人可以解释我如何在引导程序中获得 7 个相等的列？”这个问题。简短的回答是否定的，bootstrap 提供了一个宽度为 12 个分区的布局。
它适用于任何12/n = Int.，但除此之外它根本不能。
*即12/3 = 4，所以它可以做3个项目的划分，没关系。它适用于1, 2, 3, 4, 6 and 12，但将5, 7, 8, 9, 10 or 11 作为除数会导致这种问题，因为其中任何一个都等于Float。
您需要自定义代码来实现这一点，因此您可以对抗试图在引导类中解决此问题的覆盖，也可以为此创建自己的样式。 Flex 在创建响应式元素方面做得很好，请检查以下 sn-ps：
.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>如果你想在元素之间留出一些空间，你可以简单地将这个空间添加到 calcs 和元素上作为边距，如下所示：
.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">
您可以使用此方法和另一种方法here 检查完整的网格系统，其中我为给定行（如您所问）和百分比列中的等宽项创建了这些类。 （当然最好还是用mixins，别怪我，我以后会在某个地方重构它，要不……）
编辑：我刚刚记得有一种叫做偏移量的东西可以让你在 Bootstrap 中处理这些情况，查看文档看看这是否也能帮助你。
【讨论】：
【参考方案2】：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%;
【讨论】：
【参考方案3】：几乎相等、快速的解决方案。没有自定义 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>【讨论】：
你是如何找到你必须做的部门的？【参考方案4】：使用 Bootstrap 3 的网格系统，您可以将七列包装在一个 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
【讨论】：
【参考方案5】：好吧，IMO 您可能需要使用 CSS3 @media 查询覆盖列的 width。
这是我创建 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)
运行代码sn-p，点击“整页”。
.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>其他选项
此外，您可以使用 Custom Builder 构建自己的 7 列版本的 Twitter Bootstrap（更改 @grid-columns，...）。
如果您使用 less 编译器，您可以下载 less 版本的 Twitter Bootstrap（来自 Github）和 edit the variables.less 文件。
【讨论】：
+1 用于自定义构建器。我需要一周中的几天有 7 列的行，除此之外的几个月需要 12 列的行，所以我创建了一个 84 列的引导程序，它工作得很好。不过 css 文件有点大。 很好的解决方法，您还可以将@media (max-width: 768px) 添加为width = 100%，然后将@media (min-width: 768px) 留下width = 50%。
为什么要使用*width和同样的width值？我认为 *width 用于为 IE7 或以下设置不同的值。
这对我来说根本不起作用，即使在提供的演示中也是如此。
在 for 循环中添加列时，这不起作用。知道如何解决吗？【参考方案6】：
您已经在使用 Bootstrap，因此如果您对 SCSS 感到满意，您可以利用 Bootstrap 的现有 mixin 之一来创建自定义的 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 将在生成的 CSS 文件中自动生成您需要的所有 col-x 类，我已将其全部包含在此处以供那些不熟悉的人使用心：
#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>
【讨论】：
【参考方案7】：升级到 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 在比 md 更宽的屏幕上隐藏 div
所以它会给出：
<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>
【讨论】：
【参考方案8】：按照 Antony Gibbs 的回答，您可以简单地使用 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
【讨论】：
【参考方案9】：<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>
【讨论】：
【参考方案10】：如果您不必使用 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>
【讨论】：
【参考方案11】：您需要将一个 12 列的引导布局分成 7 个相等的部分。如果您四处更改 css 布局，您将面临同样的问题，例如将屏幕分成 13 个相等的部分并使用 14 列布局。
此外，更改列布局也会使您进行大量重新设计。所以，我建议你改用表。像这样
<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>";
【讨论】：
【参考方案12】：以防万一您想要一个 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);
【讨论】：
【参考方案13】：我以一种简单的方式解决了它。我只是使用了引导程序的对齐按钮组，只有 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>
【讨论】：
【参考方案14】：@Brad 您的回答非常出色且优雅，我为那些使用 sass 的人稍微修改了它。请注意，代码中的 cmets 不是我的，它们只是来自 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>
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);
【讨论】：
BS4 中不错的 redux【参考方案15】：<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>
这会解决您的问题吗？初始和最后一列空间将减少，但似乎并没有太大区别。
【讨论】：
但问题要求 equal 列【参考方案16】：我想要一个更精确的解决方案，所以我制作了一个特殊的行/列类集（语义上与日历的概念相关联）。
这破坏了 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);
【讨论】：
【参考方案17】：您的问题是您有奇数列，因此您无法实现对称。因为每一列都是一周中的一天，所以您可以说所有工作日都有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>
演示是here
【讨论】：
以上是关于引导程序中有 7 个相等的列的主要内容，如果未能解决你的问题，请参考以下文章