html - 如何设置固定百分比的 bootstrap 4 三列网格

Question

我有一个相当正常的 Bootstrap 4 网格，将一行分成 3 列，宽度相等:

<div class="row">
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-4">col-md-4</div>
</div>

(或者使用 Bootstrap 4 自动布局功能，我可以删除“-md-4”部分。

但是，现在我需要调整布局，使中间列的宽度为第一列或最后一列的一半:

| 40% |20%| 40% |

如果我使用标准的 12 列网格系统，那将不会加起来(我必须引入 1/10 列？):4,8 | 2,4 | 4,8

是否有(简单的)可能性来实现这一点？我是否必须为可用列的数量及其宽度重新定义 Less/Sass 变量？ (我宁愿不这样做，因为我非常喜欢原来的网格系统)- 我想象如果我有一个 10/20/../10x 网格系统，我可以很容易地构建它:

<div class="row"><!--10 equal width columns-->
  <div class="col-md-4">col-4</div>
  <div class="col-md-2">col-2</div>
  <div class="col-md-4">col-4</div>
</div>

感谢任何帮助!

Answer 1

Bootstrap 无法“开箱即用”，但您可以通过设置特定宽度来扩展自动布局 (.col) 列的使用...

.col-20 {
    flex: 0 0 20%;
    max-width: 20%;
}
.col-40 {
    flex: 0 0 40%;
    max-width: 40%;
}


<div class="row">
    <div class="col col-40">col</div>
    <div class="col col-20">col</div>
    <div class="col col-40">col</div>
</div>

https://www.codeply.com/go/cCakaqk7UP