html - 在桌面设备上 Bootstrap 三列意外行为

Question

我正在尝试对三个 Bootstrap 的列进行正确排序，但我只能为小型设备实现它。在桌面设备上，它只有在“重要”div 的高度大于“配置文件”div 时才能正常工作，但我遇到了“重要”div 的高度低于“配置文件”的情况。在那种情况下，我的“其他”选项卡位于“重要”div 下方，但不应该位于“profile”div 下方。

我该如何解决这个问题？

谢谢

.profile {
  background-color: blue;
  border: 1px solid black;
}

.important {
  background-color: red;
  border: 1px solid black;
}

.other {
  background-color: green;
  border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 profile">
      PROFILE DATA<br>
      1<br>
      2
    </div>
    <div class="col-xs-12 col-md-8 important pull-right">
      IMPORTANT DATA
    </div>
    <div class="col-xs-12 other col-md-4">
      OTHER DATA
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 profile">
      PROFILE DATA
    </div>
    <div class="col-xs-12 col-md-8 important pull-right">
      IMPORTANT DATA<br>
      1<br>
      2
    </div>
    <div class="col-xs-12 other col-md-4">
      OTHER DATA
    </div>
  </div>
</div>
      

Answer 1

bootstrap 每行最多包含 12 列。你给每一行 16 列 Read Bootstrap Grid

.profile {
  background-color: blue;
  border: 1px solid black;
}

.important {
  background-color: red;
  border: 1px solid black;
}

.other {
  background-color: green;
  border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 profile">
      PROFILE DATA<br>
      1<br>
      2
    </div>
    <div class="col-xs-12 col-md-4 important pull-right">
      IMPORTANT DATA
    </div>
    <div class="col-xs-12 other col-md-4">
      OTHER DATA
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 profile">
      PROFILE DATA
    </div>
    <div class="col-xs-12 col-md-4 important pull-right">
      IMPORTANT DATA<br>
      1<br>
      2
    </div>
    <div class="col-xs-12 other col-md-4">
      OTHER DATA
    </div>
  </div>
</div>