在行的列中拉伸div

Question

如何在此列中将该div拉伸为与右侧相同的高度？

我正在使用bootstrap v4和rails，而我只是对这个简单的任务不知所措。它们是div的一行，分别位于两列中。嗯..谢谢！

<div class="row justify-content-center" style="width:98vw">
  <div class="col-md-4 col-sm-6 col-10">
    <div class="booyah-black">
     Column 1 content
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-10">
    <div class="booyah-black">
     Column 2 content
    </div>
  </div>
</div>

Answer 1

在内部div上使用h-100 ...

<div class="row justify-content-center" style="width:98vw">
  <div class="col-md-4 col-sm-6 col-10">
    <div class="booyah-black h-100">
     Column 1 content
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-10">
    <div class="booyah-black h-100">
     Column 2 content
    </div>
  </div>
</div>

Answer 2

align-items: stretch或justify-items: stretch应该可以解决问题

Answer 3

您必须在代码中进行两次修改。 col-md-4 col-sm-6 col-10至col-12 col-sm-6 col-md-4 d-flex flex-row。

HTML

<div class="row justify-content-center" style="width:98vw">
  <div class="col-md-4 col-sm-6 col-12 d-flex flex-row">
    <div class="booyah-black">
     Column 1 content
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-12 d-flex flex-row">
    <div class="booyah-black">
     Column 2 content
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
</div>

CSS

.booyah-black{
  background-color: green;
  color: white;
  padding: 20px;
  width: 100%; /* This is important to fix your issues. */
}

请参见Demo

Answer 4

将列内容高度设置为100％应该适合您。我使用您共享的代码段进行了测试，但是如果您仍然遇到问题，则可以与HTML-CSS-JavaScript游乐场共享（codepen.io/jsfiddle.net）

.booyah-black {
  height: 100%;
}

修改过的HTML

<div class="row justify-content-center">
  <div class="col-md-4 col-sm-6 col-10">
     <div class="booyah-black" style="background:red">
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

     </div>
  </div>
  <div class="col-md-4 col-sm-6 col-10">
    <div class="booyah-black" style="background:yellow">
      Column 2 content
    </div>
  </div>
</div>