Question

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

此刻我将第二个col分成另一行，有两个cols。我需要让这些cols粘在一起（例如class = no-gutters）。但是一旦我移除排水沟，里面的图像就会比第一列中的图像大。我不能删除所有三个cols上的所有排水沟，因为主要col 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>

删除Bootstrap Col中的填充而不让图像放大

1 个答案: