【问题标题】:Divide a row in 5 columns in Bootstrap 4? [duplicate]在 Bootstrap 4 中将一行分成 5 列? [复制]
【发布时间】:2017-07-16 19:32:21
【问题描述】:

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

【问题讨论】:

  • 12/5 需要分数吗?
  • 你能用图表显示你的预期输出吗
  • 不知道为什么人们不赞成这个 - 这是一个完全有效的问题,特别是对于来自版本 3 的人。
  • 为什么人们反对它?因为 stackoverflow 是由一群有 0 个答案的 scrum master 运行的,但因为“它不适合页面”而喜欢对内容投反对票。这个问题就是一个很好的例子。

标签: html css twitter-bootstrap twitter-bootstrap-4


【解决方案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-12col-md-auto
  • 如果您有一排
  • @DavidG 效果很好,但你能建议如何在响应式视图中扩展它(到 col-sm-12)。
  • @Sk446 你不能只添加一个空列吗?
  • col-12col-md 也适用于填充 md+ res 上行的整个宽度的等距列
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-04-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多