Bootstrap摺疊導航欄 - 將文字左移

因此...當我的導航欄位於桌面或筆記本電腦屏幕上時，我希望將文本拉到正確的位置，這是我所做的，但是當他們從電話I查看我的網站時摺疊導航欄。當導航欄被摺疊時，我想將文本左移，而不是右移，我只是無法找到一個方法來做到這一點。Bootstrap摺疊導航欄 - 將文字左移

我已經嘗試了文本對齊方式，但很明顯只有文本對齊，而我希望它在電話屏幕上顯示時向左拉。

<!-- Navbar --> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" 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="#">Web Designs</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" aria-expanded="false" style="height: 1px;"> 
 
     <ul class="nav navbar-nav pull-right"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Projects</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
</nav> 
 
<!-- /.End of Navbar -->

來源

2015-06-13 CoffeeNinja

請添加HTML/CSS你全光照G。 – YPCrumble

你應該考慮使用「移動優先」方法 – Jackson

當您添加右拉式的類，它實際上浮元素的權利......因此，爲了使它看起來對你應該針對更小的器件的左手邊所需設備的寬度和它漂浮到左邊，就像這樣：

@media screen and (max-width: 767px) { 
     .navbar-nav { 
     float: left !important; 
     } 
    }

這應該爲你工作:)

來源

2015-06-13 15:55:26

我沒有把它浮起來，我在HTML代碼中向右拉，將它正確地懸浮在媒體查詢中，讓摺疊時更容易拉動文本？ – CoffeeNinja

我編輯了我以前的答案給你，希望你現在明白:) –

工程就像一個魅力，謝謝你的幫助先生 – CoffeeNinja

Bootstrap摺疊導航欄 - 將文字左移

回答

相關問題