我调整窗口大小时如何正确显示内容？

Question

我的页面分为3个不同的模块：左侧导航，中间图像和右侧社交侧边栏。以下是格式化此内容的CSS。当我调整窗口大小时，我遇到了麻烦;中心的图像与左侧的导航重叠，侧边栏被推到页面底部，并与左侧导航的末尾重叠。导航模块/侧边栏已修复。

我使用twitter bootstrap作为基础。

关于造成这种情况的原因以及如何解决这个问题的任何想法？

的CSS

div.sidebar{
    width: 120px;
    position:fixed; 
    top:12%; 
    left:2%;
    overflow-y:auto;
    height:100%;
}

的HTML

 <div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
    <div class = "span1" style = "width:120px;">
            <div class = "sidebar" >
            #navigation
            </div>
        </div>

<!-- middle images div -->
        <div class = "span8" style = "width: 900px;">
            #lot of images
        </div>

 <!-- social sidebar -->
        <div class = "span2" style = "margin-left: 10px; ">
            #social module with images
        </div>
</div>
</div>

当我缩小窗口时

正常​​

Answer 1

您是否考虑过响应式网页设计？

你说你使用twitter bootstrap？看看这个：

http://twitter.github.com/bootstrap/scaffolding.html#responsive

将此添加到头部

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

更改HTML：

<div class="container-fluid">
 <div class="row-fluid">
   <!-- left navigation div -->
     <div class="span4">
        <div class = "sidebar" >
         #navigation
        </div>
    </div>

    <!-- middle images div -->
     <div class="span6">
        #lot of images
    </div>

     <!-- social sidebar -->
     <div class="span4">
        #social module with images
    </div>
</div>

未经测试。我也不是100％流体容器的大小，我认为它的12，如果它的16你将不得不改变跨度，所以他们加起来16

Answer 2

  

我看到夫妻问题......

1. 你是通过增加宽度来彻底击败“.row-fluid”和框架的目的？删除网格元素的所有宽度分配（即.container，.row，.span（x）），让框架按照设计的目的去做...为您创建宽度。如果需要根据生成的内容调整宽度，请将其添加到.span（x）的块级元素INSIDE。

2. 你的范围必须加起来不超过12个。你有14个绝对可以进行最后一次环绕。

                                                                                                                                       

Answer 3

使用内联宽度覆盖跨度将导致奇怪的行为。你可以使用默认的TBS脚手架吗？

Answer 4

建议：

1.删除你为风格添加的所有额外的东西让bootstrap做的事情!!

2.总是用＆＃34; well＆＃34;来测试你的div。

像这样输入您的代码

<div class="container">
 <div class="row" style="margin-top:20px;">
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
</div>

col-lg- *适用于大型设备 col-xs- *用于额外的小型设备 col-sm- *适用于小型设备

像这样使用它可以达到你想要的效果

Plunker demo

调整浏览器大小以查看效果