Bootstrap 4 - 内联列表？

Question

我将一个站点从 Bootstrap 4 alpha 6 迁移到 Bootstrap 4 Beta 1。

 <ul class="nav navbar-nav list-inline">
  <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li>
  <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">G+</a></li>
  <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">T</li>
</ul>

现在，项目垂直对齐而不是水平对齐。如何使用 Bootstrap 4 beta 创建内联列表？

原文由 user70192 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap4

删除列表的项目符号并结合使用两个类 .list-inline 和 .list-inline-item 应用一些轻微的 边距。

 <ul class="list-inline">
   <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li>
   <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">G+</a></li>
   <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">T</a></li>
</ul>

原文由 Kondal 发布，翻译遵循 CC BY-SA 4.0 许可协议