CSS Bootstrap 4 - 内联列表？

Bootstrap 4 - Inline List?

提问by user70192

I migrated a site from Bootstrap 4 alpha 6 to Bootstrap 4 Beta 1.

我将一个站点从 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>

Now, the items align vertically instead of horizontally. How do I create an inline list with the Bootstrap 4 beta?

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

回答by Kondal

Bootstrap4

引导程序4

Remove a list's bullets and apply some light marginwith a combination of two classes, .list-inlineand .list-inline-item.

删除列表的项目符号，并使用.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>

回答by Muthu Kumar

The html code you written is absolutely perfect

你写的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>

The reasons that could be possible is
1. Check out the CSS for class name "nav" or "navbar-nav" may be over writing it, try to remove and debug the class names in the ulelement.
2. Check any of the child element(atag or "social-icon" class) is using block level CSS style
3. Check out your using a HTML5 !DOCTYPE html
4. Place your bootstrap.css link at the last before closing your head tag
5. Change text-xs-centerto text-centerbecause xsis dropped in Bootstrap 4.

可能的原因是
1. 检查类名“nav”或“navbar-nav”的 CSS 可能覆盖它，尝试删除和调试ul元素中的类名。
2.检查所有的子元素（的一个标签或“社会图标”类）使用块级别的CSS样式
3.检查您使用HTML5出来！DOCTYPE HTML
收盘前4.将在最后的bootstrap.css链接你的head 标签
5. 将text-xs-center更改为text-center因为xs在 Bootstrap 4 中被删除。

This One will work perfectly fine

这一个将工作得很好

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

回答by core114

Inline

排队

<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</li>
</ul>

and learn more about https://getbootstrap.com/docs/4.0/content/typography/#inline

并了解有关https://getbootstrap.com/docs/4.0/content/typography/#inline 的更多信息

回答by Anjana Silva

Shouldn't it be just the .list-group? See below,

不应该只是.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>

Reference: Bootstrap 4 Basic Example of a List group

参考：Bootstrap 4 列表组的基本示例

回答by bharti parmar

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