Question

我在父行元素内的引导列中的页脚中添加了三个ul，之前我使用vertical-align:top作为类似的页脚，但是这里不能使用它来对齐每个{{1}到父div的顶部。（它被添加到ul）

有什么想法吗？

Codepen：https://codepen.io/nickwcook/pen/aJPGeJ。

HTML：

footer > row > .col > ul

CSS

<footer>
  <row>
    <div class="col col-sm-3">
      <ul>
        <li>Quick Menu</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="col col-sm-3">
      <ul>
        <li>Recent Posts</li>
        <li><a href="#">Post One</a></li>
        <li><a href="#">Post Two</a></li>
        <li><a href="#">Post Three</a></li>
      </ul>
    </div>
    <div class="col col-sm-3">
      <ul>
        <li>About</li>
        <li><a>Lorem ipsum dolor sit amet, vel decore vidisse an, id simul quaerendum usu. Et vis nemore mandamus. Ei pri dicit erroribus splendide. Alterum perfecto reprimique et nec, diam dolorum posidonium qui ei.</a></li>
      </ul>
    </div>
  </row>
  <row>
    <p>Developed by <a href="#">My Name</a></p>
  </row>
</footer>

Answer 1

由于您使用flexbox覆盖了正常的Bootstap行，请使用相应的flexbox对齐方式。

footer > row
{
    display: flex;
    align-items: flex-start;
    padding: 30px 5%;
}

https://codepen.io/anon/pen/peqKbj

垂直对齐UL到div的顶部

1 个答案: