在 Bootstrap Column Divs 中保持动态高度

Question

我有两行按顺序写入。我得到这样的输出。Stackblitz link

我需要在右上角找到与 LHS 相同级别的 RHS。由于我已经简化了我的实际问题，请不要建议将LHS div 和RHS div 放在同一个class="row" 中。我需要将它们分开在不同的class="rows" 中。我只是希望RHS div 位于顶部，而与LHS div 无关。

 <div class="row">
    <div class="col-md-9">
     LHS DIV
     This is a div which can have a dynamic height.
    </div> 
</div>
<div class="row" style="margin-top: inherit;">
    <div class="col-md-9">
    </div>
    <div class="col-md-3">RHS DIV</div>
</div>

PS：

1. 我尝试使用margin-top: -30%；但问题是这个百分比取决于LHS div 的高度。
2. LHS 和RHS div 的高度都可以变化。欢迎任何帮助。

Answer 1

对于那些仍在寻找解决方案的人：

我后来发现，可以通过将 div 的位置设为absolute 来将特定的 div 移动到任何地方。

<div class="container" style="position:relative">
<!-- LHS div code will be same -->
<div class="row">
    <div class="col-md-9">
    </div>
    <div class="col-md-3" style=" position: absolute;top: 0;right: 0;border: 1px solid red;">
    <strong>RHS div</strong></div>
</div>
</div>

欢迎更多新的更好的方法:)

Answer 2

使用引导类的解决方案

.rhs-div {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container d-md-flex">
  <div class="row mx-0">
    <div class="col-md-12" style="border:1px solid red">
      <strong>LHS DIV</strong> This is a div which can have a dynamic Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore esse quae quis eaque ab? Magnam tenetur id ducimus laudantium, optio quisquam eos ut dolorum sunt iure deserunt deleniti
      delectus voluptatibus.
    </div>


  </div>
  <div class="row mx-0">
    <div class="col-md-9 d-md-none">
    </div>
    <div class="col-md-12 rhs-div "><strong>RHS div</strong></div>
  </div>
</div>

另一个只修改 CSS：

.rhs-div {
  border: 1px solid red;
}

@media (min-width:767px) {
  .container {
    display: flex;
  }
  .container .row{
    margin:0;
  }
  .container .row .col-md-9,
  .container .row .col-md-3{
    width:100%!important;
    max-width:100%!important;
    flex: 0 0 100%;
  }
  .container .row:last-child .col-md-9 {
    display:none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container">
  <div class="row">
    <div class="col-md-9" style="border:1px solid red">
      <strong>LHS DIV</strong> This is a div which can have a dynamic Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore esse quae quis eaque ab? Magnam tenetur id ducimus laudantium, optio quisquam eos ut dolorum sunt iure deserunt deleniti
      delectus voluptatibus.
    </div>


  </div>
  <div class="row">
    <div class="col-md-9">
    </div>
    <div class="col-md-3 rhs-div"><strong>RHS div</strong></div>
  </div>
</div>