NavBar在移動設備上垂直堆疊

使用引導程序的我的熱門NavBar在桌面上很好，但是當我使用我的Mobile瀏覽我的網站時，導航欄鏈接顯示爲垂直堆疊，而不是水平，爲什麼會發生這種情況？任何線索？NavBar在移動設備上垂直堆疊

我使用的引導，這裏是我的代碼：

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 
body { 
 
    background: black url(Images/image.png) no-repeat center center; 
 
    height: 100vh; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.navBarLinks { 
 
    color: white; 
 
} 
 
.navBarLinks:hover { 
 
    color: black; 
 
} 
 
.body-content {} .dl-horizontal dt { 
 
    white-space: normal; 
 
} 
 
input, 
 
select, 
 
textarea { 
 
    max-width: 280px; 
 
}

<ul class="nav nav-justified navbar-inverse"> 
 
    <li><a class="navBarLinks">Stuff1</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff2</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff3</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff4</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff5</a> 
 
    </li> 
 
</ul> 
 
//more stuff not relevant

預先感謝您！

來源

2016-10-01 TiagoM

Bootstrap使用移動第一CSS。所以，當屏幕是移動大小，然後它使用CSS顯示列表像正常。但是，當屏幕達到768的最小寬度時，它會將其更改爲顯示：table-cell。這被稱爲使用媒體查詢的響應技術。 – orangeh0g

我明白了，謝謝，所以我可能需要爲移動設備設置一個全新的佈局..因爲他們的方式看起來很糟糕。 – TiagoM

通常導航是隱藏的，您可以通過移動視圖的漢堡菜單圖標訪問它。查看bootstrap站點上的示例...縮小窗口大小，然後您會看到它是如何工作的。鏈接到bootstrap導航https://getbootstrap.com/examples/navbar/ – orangeh0g

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a class="navBarLinks">Stuff1</a></li> 
 
     <li><a class="navBarLinks">Stuff2</a></li> 
 
     <li><a class="navBarLinks">Stuff3</a></li> 
 
     <li><a class="navBarLinks">Stuff4</a></li> 
 
     <li><a class="navBarLinks">Stuff5</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

這就是我說的是......利用引導例如一個基本的例子。

https://getbootstrap.com/examples/navbar/

當「運行的代碼片斷」打開它使用全頁面按鈕，然後縮小瀏覽器，以獲得更好的主意。

來源

2016-10-01 20:47:17 orangeh0g

非常感謝！這工作完美無瑕！我只是改變了一些細節，以符合我自己的需求，這裏是我的最終結果：https：//gist.github.com/anonymous/359b6862cac06d467acf0c0296a3f6ba – TiagoM

NavBar在移動設備上垂直堆疊

回答

相關問題