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

Question

我想知道是否有人可以解释我如何在 bootstrap 中获得 7 个相等的列？我正在尝试制作日历。这段代码似乎做了 5：

 div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

我的主要内容有以下类，所以我希望 7 列位于其中：

col-lg-12

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

原文由 Jimmy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

那么，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 )

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

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

其他选项

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

如果您使用的是 less 编译器，则可以下载 less 版本的 Twitter Bootstrap（来自 Github ）并改为 编辑 variables.less 文件。

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

几乎相等 的 快速 解决方案。没有自定义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 发布，翻译遵循 CC BY-SA 4.0 许可协议