Question

我想将col-lg-8与col-lg-4对齐，其中包含2行2张图像，我需要将这2列完美对齐，以便它们彼此适合高度

我试过这个： desired look

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="row">
        <div class="col-lg-8">
         <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
        </div>
        <div class="col-lg-4">
          <div class="row">
            <div class="col-lg-2">
              <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>

            </div>
          </div>
          <div class="row">
            <div class="col-lg-2">
              <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

链接到CODEPEN

Answer 1

尝试以下代码，我希望这是您正在寻找的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>

    </div>
    <div class="col-lg-8">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
    </div>
    <div class="col-lg-4">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
    </div>
  </div>

</div>

Answer 2

你不能依靠引导来做所有事情。您将添加一些自己的自定义CSS以实现您想要的效果。如果您不熟悉css和选择器W3 schools是一个很好的资源。

要实现此效果，请将此CSS添加到文档的头部： （这只是为了根据您的示例进行说明，如果此页面有更多内容，您将希望更加具体地使用您的选择器）

<style>
    img {
        width: 100%; /* Makes imgs match the parent column/container width */
    }
    #top-image {
        margin-bottom: 30px; /* Adds the necessary space to the bottom of the first image */
    }
</style>

col-lg-4中的列不应该是col-lg-2。这基本上是说这些列是容器大小的2/12。而是将它们更改为12以跨越容器的整个宽度。我还在此列的第一张图片中添加了一个ID＆＃34; id =＆＃34; top-image＆＃34;添加必要的保证金。

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-8">
                    <img src="img/1.png" />
                </div>
                <div class="col-lg-4">
                    <div id="top-image" class="row">
                        <div class="col-lg-12">
                            <img src="img/2.png" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <img src="img/3.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

虽然你不能依靠Bootstrap做任何事情，但你不需要任何额外的css＆＃34;体操＆＃34;由@derek-gutierrez提出，因为仅使用本机Bootstrap类就可以完成几乎所有内容，而且在这个特定情况下肯定会完成。

以下代码更精简，并且只使用本机Bootstrap类完成所需的一切。不需要额外的体操。所有都有完美的填充/开槽装箱：

＆＃13;

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <img src="Cupcakes01.jpg" class="img-fluid">
        </div>
        <div class="col-lg-4">
            <div class="row">
                <div class="col">
                    <img src="Cupcakes01.jpg" class="img-fluid">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <img src="Cupcakes01.jpg" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

这就是Bootstrap网格的神奇之处。

注意：您有2个不必要的div（第一行和第-g-12行）。我把它们剪掉了这在代码中完全没用。不要输入超过必要的代码。这减少了潜在问题的数量。

将2列与行中的图像对齐

3 个答案: