css - 在不放大图像的情况下删除 Bootstrap Col 中的填充

Question

我有一个 col-4 | Bootstrap 4 Beta 3 中的 col-8 布局。第一列包含图片，第二列应包含图片和文字。

目前，我已将第二列分成两列。我需要让这些列粘在一起(例如 class=no-gutters)。但是一旦我移除排水沟，里面的图像就会比第一个列中的图像大。我无法移除所有三个列上的所有间距，因为主列 1 和 2 之间应该留有余量。

代码笔: https://codepen.io/SchweizerSchoggi/pen/mpjgLP

<div class="container mt-3">

  <div class="row">

    <!-- Teaser 1 -->
    <div class="col-12 col-md-4" id="teaser_Umzug">

      <div class="teaser-img teaser-stick">

        <img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />

        <div class="teaser-overlay pt-2 pl-4 z-2">
          <div class="teaser-txt">
            <h2 class="mb-3"></h2>
            <p class="mb-4">
              <span class="bold clearfix">Settelen &ndash;</span> ist Ihr Partner<br/>für <a href="#">regionalen</a> und <a href="#">nationalen</a> Umzug.
            </p>
            <button type="button" class="teaser">Mehr erfahren</button>
          </div>
        </div>

      </div>

    </div>

    <!-- Teaser 2 -->
    <div class="col-12 col-md-8" id="teaser_AutoService">

      <div class="row">

        <!-- Teaser 2 Img -->  
        <div class="col-12 col-md-6 bg-box-light">
             <div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
        </div>

        <!-- Teaser 2 Text -->
        <div class="col-12 col-md-6 bg-box-light">
          <div class="teaser-txt pt-4 pl-4">
            <p class="mb-4">
              <span class="bold clearfix">XY Company &ndash;</span> Ihr starker Partner in Sachen <a href="#">Auto</a> und <a href="#">Service</a>.
            </p>
            <button type="button" class="teaser">Services</button>
          </div>
        </div>

    </div>

  </div>

</div>

Answer 1

好吧，这是我想出的解决方案......

将 pl-md-0 类添加到预告片 2 图像的列中。 (删除中等屏幕的左填充)

然后将第一列的内容(包括预告片 1 图像)放入新的行-列对中。

然后将 pl-md-0 类添加到预告片 1 图像的内列。

我相信这就是您想要的效果。 (我没有触及右填充，因为我认为没有必要，但您当然可以使用 px-md-0 类删除左右填充。)

代码如下:

.bg-box-light {
            background-color: #eee; /* TBD ! */
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container mt-3">
    <div class="row">

        <!-- Teaser 1 -->
        <div class="col-12 col-md-4" id="teaser_Umzug">
            <div class="row">
                <div class="col pl-md-0">
                <div class="teaser-img teaser-stick">
                    <img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />

                    <div class="teaser-overlay pt-2 pl-4 z-2">
                        <div class="teaser-txt">
                            <h2 class="mb-3"></h2>
                            <p class="mb-4">
                                <span class="bold clearfix">Settelen &ndash;</span> ist Ihr Partner<br/>für <a href="#">regionalen</a> und <a href="#">nationalen</a> Umzug.
                            </p>
                            <button type="button" class="teaser">Mehr erfahren</button>
                        </div>
                    </div>

                </div>
            </div>

            </div>

        </div>

        <!-- Teaser 2 -->
        <div class="col-12 col-md-8" id="teaser_AutoService">
            <div class="row">

                <!-- Teaser 2 Img -->
                <div class="col-12 col-md-6 pl-md-0 bg-box-light">
                    <div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
                </div>

                <!-- Teaser 2 Text -->
                <div class="col-12 col-md-6 bg-box-light">
                    <div class="teaser-txt pt-4 pl-4">
                        <p class="mb-4">
                            <span class="bold clearfix">XY Company &ndash;</span> Ihr starker Partner in Sachen <a href="#">Auto</a> und <a href="#">Service</a>.
                        </p>
                        <button type="button" class="teaser">Services</button>
                    </div>
                </div>

            </div>

        </div>

    </div>
</div>