Bootstrap3響應中斷

當我編輯我的bootstrap3頁面時，我注意到響應中斷。我試圖弄清楚自己我做錯了什麼，但我找不到任何東西。如果任何人都可以給我一個幫助看代碼，我將不勝感激。Bootstrap3響應中斷

你可以在我的jsfiddle鏈接看看：https://jsfiddle.net/w07ugjyp/1/您所有的佈局容器的

<div class="layout-container"> 
     <nav class="navbar navbar-default"> 
     <div id="navbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#" data-toggle="modal" data-target="#loginModal">Join us</a></li> 
      <li><a href="#">Downloads</a></li> 
      <li><a href="#">Rankings</a></li> 
      <li><a href="#">Vote</a></li> 
      <li><a href="#">Community</a></li> 
      </ul> 
     </div><!--/.container-fluid --> 
     </nav> 

     <div class="container"> 
     <div class="layout-sidebar"> 
      <div class="side-control"> 
      <header><h2>Sidebar</h2></header> 

      <div class="side-content"> 
       Content here 
      </div><!--/.side-content --> 
      </div><!--/.side-control --> 
     </div><!--/.layout-sidebar --> 

     <div class="col-md-9"> 
      Content here 
     </div><!--/.col-md-9 --> 
     </div><!--/.container --> 
    </div><!--/.layout-container -->

來源

2016-02-12 Alessandro

什麼問題，什麼是想要的答案嗎？不要說迴應，更具體。 –

佈局容器響應中斷：切換頁面解析時，它完全搞亂了。 – Alessandro

首先有一個1000像素最小寬度。這就是爲什麼它不會比手機尺寸更小。你也可以考慮不改變bootstraps css並製作你自己的樣式表並在bootstraps css之後加載它。這會讓你的生活變得更輕鬆。頭部標記中的示例：

<link href="assets/css/bootstrap.min.css" rel="stylesheet"> 
<link href="assets/css/YourCustomStyles.css" rel="stylesheet">

此外，靴子還有很多功能，您嘗試合併已經內置在面板等類似物件中。而且，如果您嘗試使用引導程序導航欄，則可能需要合併導航欄標題和導航欄摺疊，否則它會顯得有點愚蠢。如果你不打算使用這些東西，不希望有一個下拉菜單，那麼我建議剛剛創建自己的列表如下所示：

<nav> 
    <ul> 
    <li><a href="">Something</a></li> 
    <li><a href="">Something</a></li> 
    <li><a href="">Something</a></li> 
    <li><a href="">Something</a></li> 
    </ul> 
</nav>

並給出display: inline-block;的<li>一個float: left;和<a> CSS和從去那裏。否則，在移動寬度你的navbar-nav將顯示有趣。我個人建議只使用bootstraps導航欄組件和下拉菜單。

這裏是你正在嘗試使用引導程序組件Fiddle

做榜樣無論如何，我希望這有助於

來源

2016-02-13 10:52:51

謝謝！很有用 – Alessandro

Bootstrap3響應中斷

回答

相關問題