Question

我正在使用flexbox使用bootstrap 4，我不明白为什么我的商品尺寸不一样。左侧的div大于右侧的div。我该怎么解决？

<div class="row mb-0 pb-0 d-flex" style="border:1px solid red;">
  <div class="col-sm-8 mb-0 pb-0" style="border:1px solid blue;">
    <div class="md-form mt-4">
      <textarea type="text" id="objetivo_especifico" class="md-textarea form-control" formControlName="objetivo_especifico"></textarea>
      <label for="objetivo_especifico">Objetivo Específico</label> 
    </div>
  </div>
  <div class="col-sm-4 flex-center" style="border:1px solid blue;">
    <a  class="m-0"     class="btn-pin waves-light animated mr-8 bola_roja p-0 m-0" >Holi
    </a>
  </div>
</div>

http://jsfiddle.net/eh98ugvs/

作为.row类的子级的第二个div相对于其大小具有高度。我希望它具有与div更高的高度相同的高度，在这种情况下，它就是左侧的div。

Answer 1

Bootstrap的最新版本是4.2.1。您使用的是Alpha版本，这意味着它可能不稳定，并可能包含许多错误，这些错误已在更高版本中修复。 Flexbox已修复，现在的行为应符合预期。

有关更多信息，请查看网站https://getbootstrap.com

请参见下面的代码段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.css">

<div class="row mb-0 pb-0 d-flex" style="border:1px solid red;">
  <div class="col-sm-8 mb-0 pb-0" style="border:1px solid blue;">
    <div class="md-form mt-4">
      <textarea type="text" id="objetivo_especifico" class="md-textarea form-control" formControlName="objetivo_especifico"></textarea>
      <label for="objetivo_especifico">Objetivo Específico</label> 
    </div>
  </div>
  <div class="col-sm-4 flex-center" style="border:1px solid blue;">
    <a class="m-0" class="btn-pin waves-light animated mr-8 bola_roja p-0 m-0" >Holi</a>
  </div>
</div>

班级的孩子的身高不一样

1 个答案: