Html Bootstrap，标题/横幅，将宽度和定位与正文匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19529217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap, header/banner, matching width and positioning to body
提问by composerMike
I'm new to Bootstrap, and trying to redesign a website made originally by someone else. It's a WordPress site using the Roots theme, so it has Bootstrap installed. I would like to use an image as a header/banner. I would like the image to be the same size and positioning as the body, at all widths. My code so far is not working. The banner image is not resizing, and it's not aligned with the body at any browser width. Here's what I have now: (the site is http://brilliantzenaudio.com)
我是 Bootstrap 的新手，并试图重新设计最初由其他人制作的网站。这是一个使用 Roots 主题的 WordPress 站点，因此它安装了 Bootstrap。我想使用图像作为标题/横幅。我希望图像在所有宽度上都与身体具有相同的大小和位置。到目前为止，我的代码不起作用。横幅图像不会调整大小，也不会在任何浏览器宽度下与正文对齐。这是我现在拥有的：（该网站是http://brilliantzenaudio.com）
In templates/header.php,
在模板/header.php 中，
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="<?php get_template_directory(); ?>/assets/img/brav-banner-2.jpg">
</div>
</div>
</div>
</header>
Some excerpts from app.css that I think are relevant. Let me know if there seems to be something missing here (I can't post all of app.css, it's hundreds of lines),
我认为相关的 app.css 中的一些摘录。让我知道这里是否缺少某些东西（我无法发布所有 app.css，它有数百行），
.content {
background:#fff;
padding-top:2em;
}
.home .content {
padding-top:0;
}
.main { }
.page-header {
margin: 10px 0 20px 0;
background: #222;
padding: 5px;
border-radius: 5px;
}
.page-header h1 {
color:#fff;
margin:0;
}
.page-header h1:before {
content: "#test {
background-image: url("/assets/img/brav-banner-2.jpg");
height: 295px;
background-size: 100%;
}
bb";
}
回答by Trevor
Instead of having an image tag inside your div.
而不是在你的 div 中有一个图像标签。
You could set the background-image of the div. Try something like this.
您可以设置 div 的背景图像。尝试这样的事情。
CSS
CSS
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="test">
</div>
HTML
HTML
##代码##Update
更新
Try setting your image to 100% width instead. It should automatically re size the image
尝试将图像设置为 100% 宽度。它应该自动调整图像大小
