在Bootstrap 4中划分5列中的一行?

时间:2017-02-26 03:51:17

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

如何在Bootstrap 4中的5列中平均划分一行,其中总共有12列?有人知道吗?

1 个答案:

答案 0 :(得分:12)

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>