调整大小的浏览器不会正确调整大小的div - 这么简单我做错了什么？ [英] resizing browser does not resize div correctly - so simple what am I doing wrong?
问题描述
当我缩小浏览器宽度时，我希望标题div与浏览器一起缩小，并占据整个页面宽度。相反，div停止在浏览器宽度，然后有空白的右侧和水平滚动条。这似乎是一个问题，我使用bootstrap的方式，但我不能弄清楚。任何帮助赞赏
我在我的项目中使用最新的minified bootstrap css，并完全简化了我的布局。
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< link rel =stylesheettype =text / csshref =style.css/>
< link rel =stylesheettype =text / csshref =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：
code> body {
background-color：＃CDE0E4;
width：100％;
}
.header {
position：relative;
height：120px;
background-color：＃CDE0E4;
box-shadow：0 0px 15px＃272727;
}
感谢
您需要的是流体布局（查看文档）。此术语表示您的内容占用了最多可用的宽度，并在调整浏览器窗口大小时调整大小。在这种情况下，您应该使用 .container-fluid 和 .row-fluid >
但您误用了一些Bootstrap的类。
.row
当您要创建多列布局时使用。为此，您可以使用 .span * 类（查看文档的示例）。
.container
当你想要你的内容在两边有一个空白（它将 20px 为 .container-fluid c。 p>如果你使用的是HTML5（你通过声明<！doctype html> ），为什么不使用< header& code>而不是< div class =header> ？
When I shrink the browser width I expect the header div to shrink along with the browser and take up the entire width of the page. Instead the div stops at the browser width and then there is blank space to the right and a horizontal scroll bar. This seems to be a problem with the way I'm using bootstrap but I can't figure it out. Any help appreciated
I'm using the latest minified bootstrap css in my project and have completely simplified my layout below.
<!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;
}
Thanks
What you need is fluid layout (see the docs). This term means that your content takes most available width and is resized when browser window is resized. In this case you should use .container-fluid and .row-fluid instead of their unsuffixed versions.
But you are misusing some of Bootstrap's classes.
.row
Is used when you want to create a multi-column layout. For this you have .span* classes to use inside it (see the docs for examples).
.container
Is used when you want your content to have a white space on the sides (it will be 20px for .container-fluid and maximum available for .container).
.header
If you are using HTML5 (which you do by declaring <!doctype html>), why not to use <header> instead of <div class="header">?
这篇关于调整大小的浏览器不会正确调整大小的div - 这么简单我做错了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
