Question

对于引导网格中的一列，是否有一种纯CSS方式来“指示”同一行中另一列的高度？因此，如果我有以下内容：

<div class="row">
  <div class="col col-sm-6" id="column1">
    <!-- an object the height of which will be different based on screen width -->
  </div>
  <div class="col col-sm-6" id="column2">
    <!-- another object, also with varying height - might be bigger or smaller than the first object -->
  </div>
</div>

我需要的是id为“column1”的列强制第二列宽度id“column2”具有相同的宽度。目的是在第一列中具有不同大小的图片，在第二列中具有描述文本。由于文本的长度，描述文本的高度可能比图片高，但它不能增加列的高度，而是隐藏溢出文本。

Answer 1

您可以通过将右列的内容包装到另一个绝对定位的div中，并让父.col具有overflow-y: scroll;属性来实现这一点，如下例所示。 / p>

＆＃13;

<div class="container">
    <div class="row">
        <div class="col col-sm-6" id="column1">
            <!-- an object the height of which will be different based on screen width -->
            <img class="d-block w-100" src="http://via.placeholder.com/350x200?text=Image">
        </div>
        <div class="col col-sm-6" id="column2" style="overflow-y: scroll;">
            <!-- another object, also with varying height - might be bigger or smaller than the first object -->
            <div class="position-absolute">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas dapibus nisi eget pretium. Morbi neque risus, bibendum porttitor eleifend non, iaculis vitae est. Proin fermentum nisi ut urna aliquet, maximus laoreet ante maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dignissim metus vel dui consectetur, at bibendum enim interdum. Duis feugiat ipsum ut varius lobortis. Suspendisse id justo sapien. Phasellus bibendum lacus aliquet velit aliquam commodo. Praesent pellentesque dui vel gravida lobortis. Nam ullamcorper pellentesque viverra. Vestibulum tortor odio, pretium vel accumsan ut, rutrum vitae neque. Sed congue a risus sed dapibus. Quisque eu sem tincidunt, facilisis odio vitae, efficitur odio. Curabitur tortor nulla, volutpat ut leo et, egestas dignissim mi. 
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

＆＃13;

.position-absolute是一个Bootstrap Positioning utility类，用于在元素上设置position: absolute;。

Bootstrap 4列指示另一列

1 个答案: