对齐引导程序中的列

Question

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

无论我在列中有多少项，我都试图实现左右列对齐顶部。见下图。

我目前的代码在这里：

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

有谁能够帮我？

Answer 1

你给了对齐项目：持有人div的中心。尝试添加align-items：flex-start。希望这能解决这个问题。

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

Answer 2

从align-items: center;删除.holder。因为第一个ul含量较少，所以它与中心对齐。

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

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

Answer 3

你可以根据自己的需要使用bootstrap ...我把你的html代码剥离到你的2 ul，使用bootstrap非常简单，类似于

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