Question

我尝试使用Bootstrap网格系统对齐某些容器。最终结果应如下图所示。

但我得到了以下结果。

代码：

<div class="row">
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-6"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
</div>

我主要是在问这个问题，因为如果我反转div，我会得到预期的结果。

代码：

<div class="row">
    <div class="img col-xs-12 col-sm-12 col-md-6"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
</div>

让我们知道我尝试重新制作图像布局可能会有所帮助：https://founderspledge.com/

Answer 1

我尝试过创建该布局并提出这个问题：

<div class="container-fluid">

  <div class="row">
    <div class="lg col-md-6">
      <div class="sm col-md-6">
        small
      </div>
      <div class="sm col-md-6">
        small
      </div>
    </div>
    <div class="lg col-md-6">
      large
    </div>
  </div>

  <div class="row">
    <div class="lg col-md-6">
      large
    </div>
    <div class="lg col-md-6">
      <div class="sm col-md-6">
        small
      </div>
      <div class="sm col-md-6">
        small
      </div>
    </div>
  </div>

</div>

以下是一个示例的链接：

http://codepen.io/minipunch/pen/zKYOxO

如果有帮助或者您有疑问，请告诉我们！

Answer 2

您可以使用此布局：

<div class="row">
  <div class="col-md-6">
    <div class="img col-xs-12 col-sm-12 col-md-6">1</div>
    <div class="img col-xs-12 col-sm-12 col-md-6">2</div>
    <div class="img col-xs-12 col-sm-12 col-md-6">3</div>
    <div class="img col-xs-12 col-sm-12 col-md-6">4</div>
  </div>
  <div class="col-md-6">
    <div class="img col-xs-12 col-sm-12 col-md-12">5</div>
  </div>
</div>

这是一个有效的jsfiddle： https://jsfiddle.net/2kdd51kw/

Answer 3

我会做这样的事，这是codepen.io链接：http://codepen.io/anon/pen/KgKKdd

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-6 small-box">1</div>
      <div class="col-md-6 small-box">2</div>
      <div class="col-md-6 small-box">3</div>
      <div class="col-md-6 small-box">4</div>
    </div>
  </div>
  <div class="col-md-6 box">big content</div>
</div>

Answer 4

这是因为Bootstrap float:left。最简单的方法是在包含右侧较大图像的布局（pull-right）上使用col-md-6。

<div class="row">
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-6 pull-right"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
</div>

http://www.codeply.com/go/g36R42L3Pc

Answer 5

<div class="container-fluid">
    <div class="row">
        <div class="lg col-md-6">
            <div class="row">
                <div class="col-md-6 small-box">1</div>
                <div class="col-md-6 small-box">2</div>
            </div>
            <div class="row">
            <div class="col-md-6 small-box">3</div>
            <div class="col-md-6 small-box">4</div>
        </div>
        </div>
        <div class="lg col-md-6 large-box">Large</div>
    </div>
</div>


<style>
.small-box{
    height: 50vh;
    width: 50vh;
    border: 1px solid green;
    background-color: yellow;
}
.large-box{
    height: 100vh;
    width: 50vh;
    border: 1px solid red;
    background-color: blue;
}
</style>

如何将4个框与引导网格系统对齐？

5 个答案: