Question

我试图对三个bootstrap的列进行正确的排序，但我只能为小型设备制作它。在桌面设备上，如果重要的话，它只能正常工作。 div高于＆＃34; profile＆＃34; div但是我的情况很重要＆＃34; div高于＆＃34; profile＆＃34;。在那种情况下，我的＆＃34;其他＆＃34;标签位置低于＆＃34;重要＆＃34; div，但不低于＆＃34; profile＆＃34; div应该如此。

我该如何解决这个问题？

由于

＆＃13;

.profile {
  background-color: blue;
  border: 1px solid black;
}

.important {
  background-color: red;
  border: 1px solid black;
}

.other {
  background-color: green;
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

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>

Answer 2

这样的东西？

<div class="container">
<div class="row">
    <div class="col-sm-12 col-md-4 col-lg-4 blue">
        PROFILE DATA
        <br> 1
        <br> 2
    </div>
    <div class="col-sm-12 col-md-8 col-lg-8 red">
        IMPORTANT DATA
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-4 col-lg-4 green">
        OTHER DATA
    </div>
</div>

http://codepen.io/Psyll1/pen/XjBQNp

Answer 3

我的朋友帮我解决了这个问题。谢谢Rados Pavlicevic！

我只需要添加

style="clear: left;"

在我的OTHER DATA 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" style="clear:left">
      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" style="clear:left">
      OTHER DATA
    </div>
  </div>
</div>

谢谢！

桌面设备上的Bootstrap三列意外行为

3 个答案: