在Bootstrap 4中将行分成5列？ [英] Divide a row in 5 columns in Bootstrap 4?

问题描述

你如何在Bootstrap 4的5列中等分一行，共有12列？任何人都知道吗？

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

推荐答案

Bootstrap 4不使用类似于版本3的浮动功能，因此它可以自动将列 col 类。因此，对于5个等间距的列，只需执行以下操作即可：

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

.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 4中将行分成5列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！