爲什麼我的助推器導航欄不是水平的

-2

例如：https://codepen.io/SimpleRoger/pen/OmRKNq 導航欄是垂直不水平的;請幫忙。爲什麼我的助推器導航欄不是水平的

<html>

來源

2017-05-29 Roger Tan

請不要忽略或繞過編輯器給你的警告。非現場的例子，通過Codepen或類似的，是受歡迎的，但只作爲額外的細節。代碼中最相關的代碼片段需要包含在問題的文本中。 –

Codepen預計「HTML」編輯器僅包含「」的內容，而不是完整的文檔。它試圖爲你包括''，''和''這樣的元素，所以結果最終會包含每個元素中的兩個元素，這會破壞文檔。要添加外部CSS和JS文件，請使用編輯器面板頂部的齒輪圖標。修改過的筆：https：//codepen.io/anon/pen/JNqZrO –

感謝隊友，所以它是codepen –

嘗試運行這些代碼，請

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 
<div class="container"> 
 
    <h3>Inverted Navbar</h3> 
 
    <p>An inverted navbar is black instead of gray.</p> 
 
</div> 
 

 
</body> 
 
</html>

引導是一個積極的網站框架（對不起，我不知道該稱呼它，我所知道的是，自舉產生響應式網站）。所以它會自動檢測瀏覽器顯示網站的高度和寬度有多長。如果顯示器的高度和寬度是這麼多的引導程序將顯示這樣的網頁，如果顯示器的高度和寬度是很多引導程序將顯示這樣的網頁。基本上bootstrap有3種顯示模式，即臺式機，平板電腦和手機，這意味着bootstrap在3種不同的顯示模式下有3種不同的風格。因此，如果您使用codepen，我認爲bootstrap假設您沒有使用桌面，因此它會像上面給出的代碼一樣垂直顯示導航欄（平板電腦或手機）。我試圖複製代碼並將其粘貼到本地計算機上，並且運行良好（導航欄水平顯示）。因此，如果您想製作網站並使用引導程序，我建議您使用本地PC，而不是使用codepen。您可以將引導程序複製到本地PC，並且可以使用phpStorm或其他類似的軟件，這樣可以通過ftp輕鬆將站點上載到您的服務器。

來源

2017-05-29 04:07:07

您的導航欄在大屏幕上工作正常。但在中小屏幕上，它變得垂直。所以我想出了一個簡單的解決方案：將元素浮動到左側。只需將以下代碼添加到您的樣式表。

.navbar-nav>li, .navbar-nav { 
    float: left !important; 
}

我希望這有助於！

來源

2017-05-29 07:36:29 cruz

爲什麼我的助推器導航欄不是水平的

回答

相關問題