Bootstrap 框架，当页面过小时，内容错位问题

Question

我在chrome浏览器下，小屏幕上看的时候，发现有些页面的样式有些错位。

这个网站：http://joinwee.com/

这个问题在正比较大的显示器上看时是没有的，但当把浏览器窗口调小之后，就会出现下面的问题：

另一个比较重复的问题就是项目页面中，那个项目头了，缩小窗口之后，严重变形：

请问可以如何调整？

Answer 1

我现在的处理办法，是重写了.container，改成了固定宽度，同时将所有的col-lg-*改成了col-xs-*，并且去掉了meta中的<meta name="viewport" content="width=device-width, initial-scale=1.0">，这样处理之后，改变窗口大小时，就不会出现排版混乱的问题了的。

Answer 2

<div class="container" style="min-width: 1170px;max-width: 1170px;">

导航条的长度被限定在1170，去掉此内置样式后boostrap3的响应式才能生效。至于这个最小长度见bootstrap样式，根据需要自行设置。

media (min-width: 768px) {
 .container {
 width: 750px;
 }
 }

Answer 3

不知道楼主想要的是不是这个效果。

页面向下滚动的时候导航列表自动会出现在顶部。但是之前的设计者没有将列表的背景设置为白色，而默认是透明色的，所以就有了题主那样的效果。

我将id为affix-list的元素添加了下面这些css

{
    left: 0;
    box-shadow: 0 0 10px #ADADAD;
    background: #FFF;
    border-bottom: 1px solid #ADADAD;
}

但这还有一个问题，就是这个列表会长期占据屏幕上大部分位置，默认应该折叠，然后通过一些交互才让它展开才比较好。