Bootstrap 4 - 内联列表？答案

【问题标题】：Bootstrap 4 - Inline List?Bootstrap 4 - 内联列表？
【发布时间】：2020-12-09 13:08:24
【问题描述】：

我将一个站点从 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 创建内联列表？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

Bootstrap4

删除列表的项目符号并使用 .list-inline 和 .list-inline-item 这两个类的组合应用一些浅margin。强>

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

【讨论】：

【解决方案2】：

你写的html代码绝对完美

<ul class="nav navbar-nav list-inline">
 <li class="list-inline-item">FB</li>
 <li class="list-inline-item">G+</li>
 <li class="list-inline-item">T</li>
 </ul>

可能的原因是
1。查看 CSS 中的类名“nav”或“navbar-nav”可能写得过头了，尝试删除和调试 ul 元素中的类名。
2.检查任何子元素（a 标记或“social-icon”类）是否使用块级 CSS 样式
3。查看您使用的 HTML5 !DOCTYPE html
4。将您的 bootstrap.css 链接放在最后，然后再关闭您的 head 标签
5。将 text-xs-center 更改为 text-center，因为在 Bootstrap 4 中删除了 xs。

这个会很好用的

<!-- Use this inside Head tag-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>



<!-- Use this inside Body tag-->
<div  class="container">
<ul class="list-inline">
<li class="list-inline-item"><a class="social-icon text-center" target="_blank" href="#">FB</a></li>
<li class="list-inline-item"><a class="social-icon text-center" target="_blank" href="#">G+</a></li>
<li class="list-inline-item"><a class="social-icon text-center" target="_blank" href="#">T</a></li>
</ul>
</div>

【讨论】：

【解决方案3】：

内联

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


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

【讨论】：

【解决方案4】：

.list-inline bootstrap 类是一个内联无序列表。

如果您想使用有序或无序创建水平菜单列出您需要将所有列表项放在一行中，即并排边。你可以通过简单地应用类来做到这一点

<div class="list-inline">
    <a href="#" class="list-inline-item">First item</a>
    <a href="#" class="list-inline-item">Secound item</a>
    <a href="#" class="list-inline-item">Third item</a>
  </div>

【讨论】：

虽然这可能会解决最初的问题，但最好包含一个描述，以便我们知道发生了什么。

【解决方案5】：

不应该只是.list-group吗？见下文，

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

参考：Bootstrap 4 Basic Example of a List group

【讨论】：