Question

我在用语言解释这个问题时遇到了麻烦，所以我将说明一下。今天，我的首页上有这样的布局横幅：

 _______________________   _____
|                       | |     |
|                       | |     |
|_______________________| |_____|

此布局的HTML（Bootstrap v.3.3.5）如下：

<div class="row">
  <div class="col-sm-9">
    <img src="img1.jpg" alt="">
  </div>
  <div class="col-sm-3">
    <img src="img2.jpg" alt="">
  </div>
</div>

但现在我将较小的图像（右图）更改为两个单独的图像 - 在同一列中。我试过的大多数东西完全打破了文档流程，我没有运气。这是我希望它看起来像的例子：

 _______________________   _____
|                       | |_____|
|                       |  _____     
|_______________________| |_____|

我应该把它分成两列还是有其他好的Bootstrap技术可供使用？

Answer 1

<div class="row">
  <div class="col-sm-9">
    <img src="img1.jpg" alt="">
  </div>
  <div class="col-sm-3">
    <div class="row">
       <img src="img2-1.jpg" alt="">
    </div>
    <div class="row">
       <img src="img2-2.jpg" alt="">
    </div>
  </div>
</div>

不，你不应该为此打破一个列。您可以简单地向列添加行（将其视为表格），从而创建您所寻求的效果。

Answer 2

<div class="row">
  <div class="col-sm-9">
    <img src="img1.jpg" alt="">
  </div>
  <div class="col-sm-3">
    <div class="row">
      <div class="col-sm-12">
        <img src="img2-1.jpg" alt="">
      </div>
      <div class="col-sm-12">
       <img src="img2-2.jpg" alt="">
    </div>
  </div>
</div>

您可以尝试将col-sm-12用于第二行，而不是使用多行。如果你想删除恼人的填充，只需用你自己的css

将图像嵌套在列中

2 个答案: