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

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

1 个答案: