当我缩小浏览器宽度时,我希望标题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;
}
由于
答案 0 :(得分:0)
您需要的是流畅布局(see the docs)。此术语表示您的内容占用大部分可用宽度,并在调整浏览器窗口大小时调整大小。在这种情况下,您应该使用.container-fluid
和.row-fluid
而不是未填充的版本。
但是你误用了一些Bootstrap的类。
在要创建多列布局时使用。为此,您可以在其中使用.span*
个类(see the docs for examples)。
当您希望内容的侧面有空格时使用(20px
为.container-fluid
,.container
最高可用。)
如果您使用的是HTML5(通过声明<!doctype html>
来实现),为什么不使用<header>
代替<div class="header">
?
答案 1 :(得分:0)
<div class="container">
应该排在最前面。 Row嵌套在容器内,最后列嵌套在行内。你颠倒了订单。这是您的代码的一个问题。