时间戳

首页 > 解决方案 > 将图像与 Bootstrap4 对齐的问题

image - 将图像与 Bootstrap4 对齐的问题

问题描述

我正在尝试将图像与 Bootstrap 4 对齐。我.row在.container. 我现在在图像之间有空白，我不希望它是那样的。我希望图像彼此紧挨着对齐，没有任何空格。任何建议，将不胜感激。

<div class="container mycontainer">
    <div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6" id="one">   <!-- FIRST ROW LEFT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-1.jpg" alt="" class="img-responsive" id="photo-1">
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6" id="two">    <!-- FIRST ROW RIGHT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-4.jpg" alt="" class="img-responsive" id="photo-4">
        </div>

    </div>
    <div class="row">

         <div class="col-sm-12 col-md-6 col-lg-6" id="three">   <!-- SECOND ROW LEFT SIDE-->
             <img src="./images-for-sample/images-for-sample/investors-img-2.jpg" alt="" class="img-responsive" id="photo-2">
         </div>
         <div class="col-sm-12 col-md-6 col-lg-6" id="four">    <!-- SECOND ROW RIGHT SIDE-->
             <img src="./images-for-sample/images-for-sample/investors-img-5.jpg" alt="" class="img-responsive" id="photo-5">
         </div>

    </div>
    <div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6" id="five">   <!-- THIRD ROW LEFT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-3.jpg" alt="" class="img-responsive" id="photo-3">
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6" id="six">    <!-- THIRD ROW RIGHT SIDE-->
            <img src="./images-for-sample/images-for-sample/investors-img-6.jpg" alt="" class="img-responsive" id="photo-6">
        </div>

    </div>

</div>

我目前得到的输出是：

输出图像

标签： imagetwitter-bootstrapbootstrap-4twitter-bootstrap-3

解决方案

为了实现您的目标，您必须为每个 div 删除 Bootstrap 的填充并将图像宽度设置为这些的 100%：

// you could also use img as a selector
.img-responsive {
  width: 100%;
}

// this is the selector of your div's
.col-sm-12 {
  padding: 0;
}

但是，由于您当前的实现，这将导致以下结果（对于正在运行的小提琴，请单击此处）：

第一个带空格的解决方案

如果您还想删除图像中显示的空格，您可以使用Bootstrap 的卡片列，如下所示：

<div class="card-columns">

    <div class="card" id="one">    <!-- FIRST ROW LEFT SIDE-->
        <img src="https://via.placeholder.com/350x200" alt="" class="img-responsive" id="photo-1">
    </div>
    <div class="card" id="two">    <!-- FIRST ROW RIGHT SIDE-->
        <img src="https://via.placeholder.com/350x150" alt="" class="img-responsive" id="photo-4">
    </div>

    <div class="card" id="three">   <!-- SECOND ROW LEFT SIDE-->
        <img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-2">
    </div>
    <div class="card" id="four">    <!-- SECOND ROW RIGHT SIDE-->
        <img src="https://via.placeholder.com/350x450" alt="" class="img-responsive" id="photo-5">
    </div>

    <div class="card" id="five">   <!-- THIRD ROW LEFT SIDE-->
        <img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-3">
    </div>
    <div class="card" id="six">    <!-- THIRD ROW RIGHT SIDE-->
        <img src="https://via.placeholder.com/350" alt="" class="img-responsive" id="photo-6">
    </div>

</div>

并根据您的需要使用一些 css 对其进行调整：

// the default column count is 1 and there should not be a space between the columns
.card-columns {
  column-count: 1;
  column-gap: 0;
}

// for medium devices and larger set the count to two
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}

// reset card's margin bottom
.card {
  margin: 0 !important;
}

// scale images properly to fit the divs
img {
  width: 100%;
  max-width: 100%;
}

结果如下所示：

没有空格的第二种解决方案

你可以在这里找到正在运行的小提琴。

如果您使用的是 Bootstrap 3，请查看这篇 Medium 文章。

祝你好运！

推荐阅读