在不让图像放大的情况下删除Bootstrap列中的填充

Question

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

目前，我已经将第二列划分为另一行，其中包含两个列。我需要将这些to连接在一起(例如class=no-gutters)。但是，一旦我移除间隔，里面的图像就会变得比第一列中的大。我不能删除所有三个列的所有间隔，因为在主列1和列2之间应该留有空白处。

Codepen：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>

​