Html 在 Bootstrap 4 中将一行分成 5 列?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42464536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:26:01  来源:igfitidea点击:

Divide a row in 5 columns in Bootstrap 4?

htmlcsstwitter-bootstraptwitter-bootstrap-4

提问by weather api

How do you equally divide a row in 5 columns in Bootstrap 4 where it has 12 columns total? Anyone knows?

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

回答by DavidG

Bootstrap 4 doesn't use floats like version 3 did so it can automatically space out your columns using just the colclass. So for 5 equally spaced columns, just do this:

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-rwtheitroadesjU2yc3z8GV/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>