Bootstrap 4 - 内联列表？

我迁移从自举4阿尔法6的位点来引导4贝塔1.Bootstrap 4 - 内联列表？

<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测试版创建内联列表？

来源

2017-08-12 user70192

Bootstrap4

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

来源

2017-08-12 12:26:45 Kondal

在线

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

，并详细了解https://getbootstrap.com/docs/4.0/content/typography/#inline

来源

2017-10-09 12:57:53 core114

你写的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类名是“导航”或“导航条 - 导航”，可以在写它，尝试删除并调试ul元素中的类名称。
2.检查任何子元素（a标记或“社交图标”类）是否使用块级CSS样式
3.检查出您使用HTML5 ！DOCTYPE html
4.将您的bootstrap.css关闭你的头标记
5.更改文本-XS-中心到文本中心因为XS前的最后一个环节中引导被丢弃4.

这人会完全正常工作

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

来源

2017-12-19 20:07:06

Bootstrap 4 - 内联列表？

回答

相关问题