Question

我正在尝试在Bootstrap中实现两个固定的列。当前情况是您可以在下图看到的内容：

无论列中有多少项，我都试图使左右列与顶部对齐。参见下图。

我当前的代码在这里：

[3]:https://jsfiddle.net/evr86bjn/2/

有人可以帮助我吗？

Answer 1

从align-items: center;中删除.holder。由于1st ul的内容较少，因此将其居中对齐。

https://jsfiddle.net/evr86bjn/2/

    .Holder {
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

Answer 2

您指定了align-items：Holder div的中心。尝试添加align-items：flex-start。希望这能解决问题。

.Holder {
display: flex;
align-items: flex-start;
justify-content: center;
}

Answer 3

如果您愿意，可以利用Bootstrap自己的优势... 我使用引导程序将其html代码简化为仅2 ul，例如

<div class="row">
  <div class="col-sm-6">             
    <ul id="listWrap" class="price-table__info"> 
      <li>
        <p class="ocjenaNaslov">Lorem Lorem 1</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem 1</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>2</p>
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul id="listWrap" class="price-table__info">
      <li>
        <p class="ocjenaNaslov">Lorem Lorem 2</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <button type="submit" class="btn btn-primary waves-effect isp"><i class="far fa-calendar-alt"></i>Info</button>
      </li>
    </ul>
  </div>
</div>

在引导程序中对齐列

3 个答案: