Html 如何在调整窗口大小时正确显示内容？_Html_Css_Twitter Bootstrap_Resize

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

html css twitter-bootstrap

Html 如何在调整窗口大小时正确显示内容？,html,css,twitter-bootstrap,resize,Html,Css,Twitter Bootstrap,Resize,我把我的页面分为三个不同的模块：左边是导航，中间是图片，右边是社交边栏。下面是格式化此内容的css。我在调整窗口大小时遇到问题；中间的图像与左侧的导航重叠，侧边栏被推到页面底部，并与左侧导航的末尾重叠。导航模块/侧栏是固定的我使用twitter引导作为基础有没有关于是什么原因造成的以及如何修复的想法 css html #航行 #很多图片 #带图像的社交模块当我把窗户变小的时候正常的您是否考虑过响应式网页设计你说你在使用twitter引导？看看这个：把这个加到头上 <m

我把我的页面分为三个不同的模块：左边是导航，中间是图片，右边是社交边栏。下面是格式化此内容的css。我在调整窗口大小时遇到问题；中间的图像与左侧的导航重叠，侧边栏被推到页面底部，并与左侧导航的末尾重叠。导航模块/侧栏是固定的

我使用twitter引导作为基础

有没有关于是什么原因造成的以及如何修复的想法

css html


#航行
#很多图片
#带图像的社交模块

当我把窗户变小的时候

正常的

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

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

把这个加到头上

<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。你考虑过响应性网页设计吗

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

把这个加到头上

<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，用内联宽度覆盖跨度会导致奇怪的行为。是否可以改用默认的TBS支架？

用内联宽度覆盖跨度将导致异常行为。您可以使用默认的TBS脚手架吗

我看到一些问题

通过添加宽度，您完全违背了“.row fluid”和框架的目的？？删除网格元素的所有宽度指定（即，..container、.row、.span（x））并让框架完成其设计任务…为您创建宽度。若需要根据生成的内容调整宽度，请将其添加到.span（x）中的块级别元素中

您的跨度总和不得超过12。你有14个，这绝对是最后一次

我看到一些问题

您的跨度总和不得超过12。你有14个，这绝对是最后一次

建议：

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-*用于大型设备列xs-*用于超小型设备列sm-*用于小型设备

像这样使用它，你可以实现你想要的

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