调整大小浏览器不会正确调整div - 这么简单我做错了什么?

时间:2012-09-12 21:23:02

标签: css twitter-bootstrap

当我缩小浏览器宽度时,我希望标题div与浏览器一起缩小并占据页面的整个宽度。相反,div停在浏览器宽度,然后右边有一个空格和一个水平滚动条。这似乎是我使用bootstrap的方式的一个问题,但我无法弄明白。任何帮助表示赞赏

我在我的项目中使用了最新的minced bootstrap css,并完全简化了我的布局。

<!doctype html>
<html lang="en"> 

 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 </head>

 <body>
  <div class="row">
   <div class="header">
    <div class="container">
     <p>Lorem ipsum dolor sit amet</p>
    </div>
   </div>
  </div>
 </body>
</html>

的CSS:

body {
 background-color: #CDE0E4;
 width: 100%;
}

.header {
 position: relative;
 height:120px;
 background-color:#CDE0E4;
 box-shadow: 0 0px 15px #272727;
}

由于

2 个答案:

答案 0 :(得分:0)

您需要的是流畅布局see the docs)。此术语表示您的内容占用大部分可用宽度,并在调整浏览器窗口大小时调整大小。在这种情况下,您应该使用.container-fluid.row-fluid而不是未填充的版本。

但是你误用了一些Bootstrap的类。

.row

在要创建多列布局时使用。为此,您可以在其中使用.span*个类(see the docs for examples)。

.container

当您希望内容的侧面有空格时使用(20px.container-fluid.container最高可用。)

.header

如果您使用的是HTML5(通过声明<!doctype html>来实现),为什么不使用<header>代替<div class="header">

答案 1 :(得分:0)

<div class="container">

应该排在最前面。 Row嵌套在​​容器内,最后列嵌套在行内。你颠倒了订单。这是您的代码的一个问题。