Question

当我缩小浏览器宽度时，我希望标题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;
}

由于

Answer 1

您需要的是流畅布局（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">？

Answer 2

<div class="container">

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

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

2 个答案:

.row

.container

.header