html – 不同高度的Bootstrap流体列列

前端之家收集整理的这篇文章主要介绍了html – 不同高度的Bootstrap流体列列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
动态地创建一组具有稍微不同高度的框,并希望在同一行显示2,3或4个(取决于屏幕尺寸).我尝试使用bootstrap的以下标记
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6" style="background-color: red">
      Three<br>Lines<br>Jup
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
  </div>
</div>

我的问题是我的第三列之下的空格.

A  B
 C  D
 C  E <- Should wrap to next row,because of C
 F  G

你可以告诉如何实现这一点吗?我认识到使用clearfix的建议,但我猜这个尝试会导致问题和丑的代码,当使用不同的列数.

感谢您的答案.

解决方法

问题

问题是所有引导列试图向左浮动.

MDN on floats

when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing Box or another floated element.

所以当你有不均匀的高度元素,正确的行为是将它们堆叠在一边.

幸运的是,有很多方法来纠正这个预期的行为:

使用CSS清除属性

MDN on Clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them

对于这个确切的结构,您可以使用nth-child selector对每个其他行应用清楚:

.col-xs-6:nth-child(odd) {
    clear: both;
}

Note: The 07003

演示jsFiddle /堆栈片段:

.col-xs-6:nth-child(odd) {
  clear: left;
}
.col-xs-6 {
  border: 1px solid grey;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>

使用.clearfix

Bootstrap way to do this是使用clearfix类,其中applies the following styles

.clearfix:before,.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

Note: You can use selectively target different screen sizes by combining this with the 07007 (i.e. .visible-*-*,.hidden-*)

演示jsFiddle /堆栈片段:

.col-xs-6 {
  border: 1px solid grey;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    
    <div class="clearfix"></div>
    
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    
    <div class="clearfix"></div>
    
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>

使用.row

您也可以将每一列的列包裹到一个新行.这是最少可重用的,但是如果每一组项目形成一个逻辑组,它都会创建语义标记.

演示jsFiddle /堆栈片段:

.col-xs-6 {
  border: 1px solid grey;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
  
</div>

固定高度

根据你的用例,你可能只是受益于使一切都相同的高度.如果您在每个列中都有类似的内容,并且希望有一个一致的网格,这将很好地工作.

.col-xs-6 {
  height: 7rem;
}

演示在jsFiddle /堆栈片段:

.col-xs-6 {
  height: 7rem;
}
.col-xs-6 {
  border: 1px solid grey;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>

猜你在找的HTML相关文章