0

我的页面分为 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>

当我把窗户变小

在此处输入图像描述

普通的

在此处输入图像描述

4

4 回答 4

2

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

你说你使用 twitter 引导程序？看看这个：

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

于 2012-12-04T22:10:37.243 回答
1

我看到的几个问题...

  1. 您通过添加宽度完全违背了“.row-fluid”和框架的目的？删除网格元素的所有宽度分配（即.container、.row、.span(x)）并让框架完成它的设计目的......为您创建宽度。如果您需要根据生成的内容调整宽度，请将其添加到 .span(x) 的块级元素内。

  2. 你的跨度加起来不超过 12。你有 14 个，这绝对会是最后一个环绕。

于 2012-12-05T03:02:10.480 回答
0

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

于 2012-12-04T23:17:47.577 回答
0

建议：

1.删​​除你为风格添加的所有额外内容，让 bootstrap 做这些事情！

2.总是用“好”来测试你的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 演示

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

于 2015-11-17T07:34:59.717 回答