杂志样式网格与Bootstrap

Question

我想制作一个杂志风格的网站，最好是使用Bootstrap（如果可能的话）。我希望它看起来像这样：

有谁可以告诉我是否可以使用Bootstrap制作类似的东西？如果没有，也许有人可以告诉我是否有一个好的选择。提前致谢。

Answer 1

像这样：

<div class="container">
    <div class="row">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
    </div>
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-12"></div>
            </div>
            <div class="row">
                <div class="col-sm-12"></div>
            </div>
        </div>
        <div class="col-sm-4"></div>
    </div>
    <div class="row">
        <div class="col-sm-12"></div>
    </div>
</div>

您可能需要为col-sm-8设置高度，使其看起来完全相同。

Answer 2

Bootstrap Grid用于创建流体布局，使用一系列容器，行和列来布局和对齐内容。 在这些示例中，html布局可以如下所示。

 <style>
.box{
    display: block;
    position: relative;
    width: 100%;
    height: 200px;
}
.left{
    float: left;
 }
 .right{
    float: right;
 }
</style>
<div class="row">
  <div class="row">
    <div class="col-sm-6 box">

    </div>
    <div class="col-sm-6 box"></div>
  </div> 
  <div class="row">
     <div class="col-sm-8 right box">

    </div>
    <div class="col-sm-8 right box">

    </div>
    <div class="col-sm-4 left box">

    </div>
  </div> 
  <div class="row">
    <div class="col-sm-12 box">

    </div>
  </div>  
</div>