在 Bootstrap 4 中将一行分成 5 列？ [复制]

Posted 2023-03-05

【中文标题】在 Bootstrap 4 中将一行分成 5 列？ [复制]

【英文标题】：Divide a row in 5 columns in Bootstrap 4? [duplicate]

【发布时间】：2017-07-16 19:32:21

【问题描述】：

您如何在 Bootstrap 4 中将一行平均分为 5 列，总共有 12 列？有谁知道吗？

【问题讨论】：

12/5 需要分数吗？

你能用图表显示你的预期输出吗

不知道为什么人们不赞成这个 - 这是一个完全有效的问题，特别是对于来自版本 3 的人。

为什么人们反对它？因为 *** 是由一群有 0 个答案的 scrum master 运行的，但因为“它不适合页面”而喜欢对内容投反对票。这个问题就是一个很好的例子。

【参考方案1】：

Bootstrap 4 不像版本 3 那样使用浮点数，因此它可以仅使用 col 类自动分隔列。所以对于 5 个等间距的列，只需这样做：

.col1 
  background-color: red;

.col2 
  background-color: green;

.col3 
  background-color: blue;

.col4 
  background-color: orange;

.col5 
  background-color: brown;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col col1">Column 1</div>
    <div class="col col2">Column 2</div>
    <div class="col col3">Column 3</div>
    <div class="col col4">Column 4</div>
    <div class="col col5">Column 5</div>
  </div>
</div>

【讨论】：

答案有点不完整，因为它没有提到例如col-md-auto，例如你可以结合col-12和col-md-auto

如果您有一排

@DavidG 效果很好，但你能建议如何在响应式视图中扩展它（到 col-sm-12）。

@Sk446 你不能只添加一个空列吗？

col-12 和 col-md 也适用于填充 md+ res 上行的整个宽度的等距列