Question

 <div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
 </div>

column1和column2应该平均分割，占用一半的空间。

 <div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="column3"></div>
 </div>

column1，column2和column3应该平均分割，占用1/3的空间。

Answer 1

只需使用Bootstrap 4自动布局列..

https://v4-alpha.getbootstrap.com/layout/grid/#auto-layout-columns

number

Answer 2

答案是否定的。在Bootstrap 3中，如果没有在列类中指定，则无法平均分割列。你只需要除以12就可以这样做。

Answer 3

我通过查看Bootstrap 4如何做到这一点解决了这个问题。

HTML：

<div class="auto-row form-group col-md-12">
    <div class="form-group"></div>
    <div class="form-group"></div>
    <div class="form-group"></div>
</div>

SCSS：

div.auto-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;

  > div {
    flex: 1 1 auto;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

Bootstrap - 列宽度平均分配，不使用col-md- *

3 个答案: