Bootstrap流体网格系统具有不同的高度

时间:2013-10-08 09:43:19

标签: twitter-bootstrap twitter-bootstrap-3

我是Bootstrap的新手。我想使用具有不同高度和相同宽度的流体网格系统网格,如下图Bootstrap grid image

我如何实现相同的目标?请帮帮我。

5 个答案:

答案 0 :(得分:29)

使用Bootstrap“开箱即用”执行此操作的唯一方法是使用4列并堆叠每个列中的项目。当您不知道每列中有多少项时,这对于动态内容并不理想。此外,商品订单从上到下,而非从左到右

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        <!--item1-->
        <!--item2-->
        <!--item3-->
        <!--item4-->
        </div>
        <div class="col-md-3">
        <!--item5-->
        <!--item6-->
        <!--item7-->
        <!--item8-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
      </div>
</div>

<小时/> 否则,您必须使用jQuery插件,如MasonryIsotope,或使用CSS3多列。

Jquery插件方法

Bootstrap Masonry Demo
Bootstrap Masonry Demo 2

CSS3列方法(类似砌体的CSS解决方案)..

这不是Bootstrap 3的原生,而是另一种使用CSS multi-columns的方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右

CSS3 multi-columns Demo

同样的问题也有more detailed info in this answer

更新2018

Bootstrap 4 包括使用CSS3多列的类似砌体的解决方案: Masonry cards Demo

答案 1 :(得分:5)

引导程序 v4.0.0-beta.2 卡片列

&#13;
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

您可以详细了解https://getbootstrap.com/docs/4.0/components/card/

答案 2 :(得分:4)

从bootstrap 4 alpha版本开始:

你也可以使用.card-columns类来包装你的bootstrap 4 .cards类元素,以实现@Skelly提到的'Masonry'列效果:

文档:https://v4-alpha.getbootstrap.com/components/card/#columns

答案 3 :(得分:1)

将此复制到html上的示例正文,因为这比解释更容易理解。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12" style="height:100px; background-color:red"></div>    
                <div class="col-md-12" style="height:100px; background-color:yellow"></div>
                <div class="col-md-12" style="height:100px; background-color:gray"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12" style="height:200px; background-color:blue"></div>       
                <div class="col-md-12" style="height:100px; background-color:black"></div>
            </div>
        </div>      
    </div>
</div>

答案 4 :(得分:0)

我可以看到你在你的列上有固定的宽度。 所以你可以写

<div class="col-xs-4">
  boxes
</div>
<div class="col-xs-4">
 boxes
</div>
<div class="col-xs-4">
boxes
</div>