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 - 內聯列表？

回答

相關問題