垂直对齐 UL 到 div 的顶部

Question

我在父行元素内的引导列内的页脚中添加了三个 ul，并且我之前使用过 vertical-align:top 类似的页脚，但不能在这里使用它来将每个 ul 与顶部对齐父 div 的。 （已添加到footer > row > .col > ul）

有什么想法吗？

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

HTML：

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

CSS

footer {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: #212121;
  margin: 0;
  z-index: 99;
}

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

footer>row:first-of-type {
  justify-content: space-between;
}

footer>row>.col {
  text-align: left;
}

footer>row>.col>ul>li:first-of-type {
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

footer>row>.col>ul {
  vertical-align: top;
  padding: 0;
}

footer>row>.col>ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

footer>row>.col ul>li {
  margin: 15px 0;
}

footer>row>.col ul>li>a {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #a5a5a5;
}

footer>row>.col ul>li>a:hover {
  text-decoration: none;
  color: #fff;
}

footer>row:last-of-type {
  background: #1f1f1f;
  display: flex;
  justify-content: center;
}

footer>row:last-of-type>p,
footer>row:last-of-type>p>a {
  font-family: 'Open Sans', sans-serif;
}

footer>row:last-of-type>p {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  color: #747475;
  font-size: 11px;
}

footer>row:last-of-type>p>a {
  color: #a5a5a5;
  text-decoration: none;
}

footer>row:last-of-type>p>a:hover {
  color: #fff;
  text-decoration: none;
}

Answer 1

由于您使用 flexbox 覆盖了正常的 Bootstap 行，因此请使用适当的 flexbox 对齐方式..

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

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