在 Bootstrap 列 Div 中保持动态高度

Question

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

我需要将右上角的 RHS 设置为与 LHS 处于同一级别。由于我已经简化了我的实际问题，请不要建议在同一个 class="row" 中同时使用 LHS div 和 RHS div。我需要将它们分开放在不同的 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:

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

Answer 1

使用 bootstrap 类

的解决方案

.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>

Answer 2

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

我后来发现，可以通过将 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>

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

在 Bootstrap 列 Div 中保持动态高度

Maintaining dynamic heights in Bootstrap Column Divs

html

css

grid

twitter-bootstrap