在 Bootstrap 中将一行分成 5 列 4？

Question

如何在 Bootstrap 4 总共有 12 列的情况下将一行平均分为 5 列？有人知道吗？

Answer 1

Bootstrap 4 不像版本 3 那样使用浮点数，因此它可以仅使用 col class 自动 space 出你的列。因此，对于 5 个 spaced 列，只需执行以下操作：

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

在 Bootstrap 中将一行分成 5 列 4？

Divide a row in 5 columns in Bootstrap 4?

html

css

twitter-bootstrap

twitter-bootstrap-4