想要使用Bootstrap将一整页拆分为四个相同大小的div

Question

我在使用高度时感到困惑：100％，内容设置为25％25％25％25％为什么它不起作用（在我的浏览器中，每个div看起来都很小，100％没有填满整页）。谁能在这里找到我的错？

我的HTML代码：

<div class="container-fluid" style="height: 100%">
        <div class="row" style="height: 25%;">
            <div class="col-xs-4 col-md-4" style="background-color:red;">
                .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            <h1 class="h1Title">Azkaban</h1>
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 50%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>
</div>

我已阅读：How can I make Bootstrap columns all the same height?

但我仍然不明白为什么100％ - ＆gt; 25％的每个div不在这里工作？

输出：

Answer 1

.container-fluid {
   height: 100vh;
}

.row .col-xs-4.col-md-4 {
  height: 100%;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

Answer 2

使用%

html,
body,
.container-fluid {
  height: 100%;
}

.row {
  height: 25%;
}

.row > div {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

使用vh

.row {
  height: 25vh;
}

.row > div {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

Answer 3

添加此css：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row > [class*='col-'] {
     display: flex;
     flex-direction: column;
}

希望这会有效但从行中删除高度。但是，如果您使用高度作为“VH”Safari浏览器将不支持此。

这个here

已经有了小提琴