前端动态响应式布局的问题

Question

目前页面布局结构为 http://jsfiddle.net/hfq8qgjk/

菜单宽度最低为 200px，现在的问题是窗口宽度较低时，右侧的内容会与菜单重叠（可以拖拽窗口宽度来测试）

如何实现右侧的内容永不与菜单重叠？

Answer 1

12列自适应栅格系统是以百分比作为尺寸分隔的，只要 .row 的宽度不固定，.col 的尺寸就会不固定！所以，百分比和 min-width 混用是错误的！解决的办法有两种：

方法一，细化 @media

这个是在现有的代码基础上修改，添加新的 media-query 属性，修正其在较小尺寸下的宽度和布局。该方案分为调整 .row 容器的最小宽度和调整 .col-xs-9 的最基础样式两种，详见其他楼层给出的方案。

方法二，不使用12列栅格布局

既然你有要求左侧最小为 200px，那么你可以使 .col-xs-9 距离左侧 200px。这是常见的布局效果。该方案又分为 float布局 和 absolute 布局2种方案。 参考：

https://jsfiddle.net/4smvcpn1/

建议，.row 和 .col 结构不添加任何样式修饰，我常把二者比喻为房子的外墙和内墙，页面上的各个模块就是家具，里面的按钮等就好比茶杯，你要让物品对齐的时候，是不能搬墙的，而是应该移动家具（当然茶杯相对家具也会跟着移动）！所以，尽量不要为二者添加额外的样式，如：border、margin、padding、height、background?-*等，它们仅仅是一个排版的用途。

Answer 2

.content {
    padding-left: 200px;
}
.wrapper {
    min-width: 1024px;
}

给容器设置一个最小宽度，内容区域设置一个相等的padding-left

Answer 3

1.首先，这个布局有问题，在足够宽的情况下，你的第一个div和第二个div之间的间距并不是15px，而是一个变量，如下截图：

因为你对第一个div使用了fixed定位，然后计算宽度的时候是按照浏览器窗口的大小算的比例，而row容器的大小是浏览器窗口大小加上30px(左右-15px的margin)，第二个div是按照row容器算的75%。
2.首先修改上述问题，将第一个div的position改为"absolute"，在row元素上添加position:relative;作为定位的父元素；然后，单说这个例子的话，你可以添加media query，计算当第一个div的25%正好等于200px的浏览器窗口大小(body + 15 + 15) * 25% = 200 body = 770px；效果如下：

Answer 4

既然你用bootstrap为啥不用栅格布局呢，栅格布局的不会重叠吧。至于菜单的最小宽度你可以按比例设置整个容器的最小宽度