Html 添加全宽横幅并使其响应引导
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41064873/
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
Adding a full width banner and making it bootstrap responsive
提问by DA-G-GURU
I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.pnglogo that is there on the original site.
我正在尝试修改引导模板以在顶部添加一个全长 1200 像素的横幅，而不是原始站点上的较小的120 x 60 图像/logo-company.png徽标。
I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.
我曾尝试无济于事，但我希望能够将这个更大的横幅完美地放置在桌面视图中，同时让它在移动设备上响应。
I assume the original logo was so small that it didn't needto have code call outs to make it responsive.
我认为原始徽标非常小，以至于不需要代码调用来使其具有响应性。
Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.
有没有人愿意看一看，看看他们是否可以提供必要的 HTML 和/或 CSS 代码来为我实现这一目标。
original site. http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
原网站。 http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
My demo http://dagrafixdesigns.com/2017/industrial-darker/index.html
我的演示 http://dagrafixdesigns.com/2017/industrial-darker/index.html
采纳答案by Benneb10
If background image isn't working for you here is a simple solution:
如果背景图片不适合您，这里有一个简单的解决方案：
<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
<!-- container-fluid is the same as container but spans a wider viewport,
it still has padding though so you need to remove this either by adding
another class with no padding or inline as I did below -->
<div class="container-fluid" style="padding: 0px;">
<div class="row">
<!-- You originally has it set up for two columns, remove the second
column as it is unneeded and set the first to always span all 12 columns
even when at its smallest (xs). Set the overflow to hidden so no matter
the height of your image it will never show outside this div-->
<div class="col-xs-12">
<a class="navbar-brand logo" href="index.html">
<!-- place your image here -->
<img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
</a>
</div>
</div>
</div>
</div>
回答by max
You can set background image for header and remove/hide the logo image.
您可以为标题设置背景图像并删除/隐藏徽标图像。
#header-row {
background-image: url(../images/logo-company.png);
}
