1

当我缩小浏览器宽度时，我希望标题 div 会随着浏览器一起缩小并占据页面的整个宽度。相反，div 停在浏览器宽度处，然后右侧有一个空白区域和一个水平滚动条。这似乎是我使用引导程序的方式的问题，但我无法弄清楚。任何帮助表示赞赏

我在我的项目中使用了最新的缩小引导 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;
}

谢谢

4

2 回答 2

0

您需要的是流畅的布局（请参阅文档）。该术语意味着您的内容占用了最大的可用宽度，并在调整浏览器窗口大小时调整大小。在这种情况下，您应该使用.container-fluidand.row-fluid而不是它们的无后缀版本。

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

。排

当您要创建多列布局时使用。为此，您可以.span*在其中使用类（请参阅文档以获取示例）。

。容器

当您希望您的内容在两侧有一个空白区域时使用（它将20px用于.container-fluid并且最大可用于.container）。

.header

如果您使用的是 HTML5（通过声明来实现<!doctype html>），为什么不使用<header>而不是<div class="header">？

于 2012-09-12T22:31:09.560 回答
0 
<div class="container">

应该在顶部。行嵌套在容器内，最后列嵌套在行内。您已经颠倒了订单。这是您的代码的一个问题。

于 2014-03-29T17:18:07.140 回答