導航欄文本，跳出引導導航欄的時候調整到手機大小

https://jsfiddle.net/rpq1tf9x/導航欄文本，跳出引導導航欄的時候調整到手機大小

<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Italian Joe</a> 
    </div> 

     <p class="navbar-text text-center" id="NavHours" style="color:white; margin:1%; width: 220px;"> Open 6am to 5pm </p> 

    <div class="collapse navbar-collapse" id="myNavbar"> 

     <ul class="nav navbar-nav navbar-right"> 
     <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> 
    </div> 
</nav> 

</body>

可在該的jsfiddle鏈接可以看到，我有一個在中間的閱讀有一個附加的文字基本引導崩潰導航欄「開放時間爲早上6點到下午5點「，在更大的屏幕上顯示效果都很好，但如果將其調整到較小的屏幕，則會打斷導航欄。任何人都知道這是爲什麼？謝謝

來源

2017-02-07 Necrosis Pain

問題是你的段落需要在你的navbar-header，而不是在它之後。只是該段向右移動DIV來糾正這一點，

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Italian Joe</a> 
    <p class="navbar-text text-center" id="NavHours" style="color:white; margin:1%; width:220px;"> Open 6am to 5pm </p> 
</div>

然而，爲了顯示「正常」，則需要從頂部偏移它通過消除margin: 1%，並給它更多的寬度（230px而不是220px）：

<p class="navbar-text text-center" id="NavHours" style="color:white; width:230px;"> Open 6am to 5pm </p>

我創建了一個新的小提琴展示這個here。

希望這會有所幫助！ :)

來源

2017-02-07 23:29:17

感謝一堆！正是我所需要的 –

很高興聽到這個答案爲你解決了這個問題。請不要忘記通過點擊表決按鈕下方的灰色檢查標記解決方案是否正確 - 這會將其從「未答覆的問題」隊列中移除，併爲問題提問者和問題答疑者授予聲譽。當然，在說，你沒有義務標記我的答案（或任何其他答案）是正確的，但它確實有助於保持事情順利進行:) –

聽起來很酷！會做！ –

導航欄文本，跳出引導導航欄的時候調整到手機大小

回答

相關問題