Question

我正在尝试使用两个不同的列将两个图像放在Bootstrap的同一行。我对齐它们，使用了一些背景颜色，两个看结果等等。

但是，当我更改分辨率以查看响应效果时，它们不会相等地调整大小！图像的宽度不同，但是，相同的高度。有人有猜测吗？

这是HTML：

.coresq {
  background-color: #131313;
}

.cordir {
  background-color: #AAAAAA;
}

.top-shows {
  margin-left: 0;
  margin-right: 0;
}

.top-shows [class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}

<div class="container">
  <div class="row top-shows">
    <div class="col-xs-4 coresq ">
      <img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-responsive"/>
    </div>
    <div class="col-xs-8 cordir">
      <img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-responsive"/>
    </div>
  </div>
</div>

当显示减少时，响应属性不会同等调整大小。不应该？他们不在同一条线上吗？

Answer 1

一个图像使用双列（xs-8）而不是另一个图像（xs-4），因此在调整大小时，较小的列会被吃掉。

Try resizing this external JSFIDDLE with equal cols

（另外，确保图像尺寸与上面的小提琴相同）

Answer 2

您有两种不同的列大小。 col-xs-4和col-xs-8

如果您希望它们具有相同的宽度，则需要为两个图像使用相同的solumn大小。 col-xs-6和col-xs-6将是您要查找的尺寸。

Answer 3

经过一些研究，我看到了Flex，它可以做到这一点，并看到了新版本的bootstrap（4，但仍然是alpha）。我已经阅读了很多，并决定测试。有用！正是我以前问过的方式，代码几乎没有变化。

嗯，自定义css是一样的，但是Bootstrap是4（alpha，用于测试），HTML就在这里：

＆＃13;

<div class="container">


    <div class="d-flex flex-row">

      <div class="col-xs-4 coresq ">
        <img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-fluid"/>
      </div>

      <div class="col-xs-8 cordir">
        <img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-fluid"/>
      </div>

    </div>


  </div>
.

＆＃13;

PS：我不知道为什么，但代码段预览中的代码正在削减结束代码的最后一个div。完成后只有一点。

在Bootstrap 3上的同一行调整两个图像的大小

3 个答案: