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响应中断

回答

相关问题