CSS Bootstrap - 设计超大屏幕元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23618333/
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 - Styling jumbotron elements
提问by CanCeylan
I'm trying to create simple mobile web site for calendar events.
我正在尝试为日历事件创建简单的移动网站。
Here's the very basic version of it: http://orhancanceylan.com/test/v2/event.html
这是它的非常基本的版本：http: //orhancanceylan.com/test/v2/event.html
The problem in here is; purple backgrounded areas are only cover the texts. But I want them to fit the full width of the jumbotron image like the mock-up below.
这里的问题是；紫色背景区域仅覆盖文本。但我希望它们像下面的模型一样适合大屏幕图像的整个宽度。
I tried to add the below code:
我尝试添加以下代码：
.jumbotron row,
.jumbotron .row {
color: #efefef;
background-color: rgba(157,52,99,0.7);
width: 100%;
}
However it's still only covers the text content.
但是它仍然只涵盖文本内容。
How should I fix this issue?
我应该如何解决这个问题？
Thanks,
谢谢，
回答by Jorn
When you're using the bootstrap framework, you'll have to override some properties of standard classes. I recommend only using the grid to avoid the overriding. If you don't want to get the fixed with you can use the container-fluid class. I've worked out a fiddle to solve your problem. Do note that I've overwritten the default bootstrapp css, which I don't recommend, but it can help you for now. I hope this helps.
当您使用引导程序框架时，您必须覆盖标准类的一些属性。我建议只使用网格来避免覆盖。如果您不想修复，可以使用 container-fluid 类。我已经想出了一个小提琴来解决你的问题。请注意，我已经覆盖了默认的 bootstrapp css，我不推荐这样做，但它现在可以帮助您。我希望这有帮助。
Container fluid: bootstrap container fluid
容器流体：bootstrap 容器流体
Fiddle: Allora - fix css
小提琴：Allora - 修复 css
Html adaptations:
Html 改编：
<div class="jumbotron">
<h1>Pampalarla Alis Veris Qeyff</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-time"></span></h3>
<h4> Thursday 12:30</h4>
</div>
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-map-marker icon-white"></span></h3>
<h4> Kanyon</h4>
</div>
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-user"></span></h3>
<h4>6 People</h4>
</div>
</div>
</div>
</div>
Css adaptations:
CSS 改编：
.jumbotron{
position: relative;
padding:0 !important;
margin-top:70px !important;
background: #eee;
margin-top: 23px;
text-align:center;
margin-bottom: 0 !important;
}
.container-fluid{
padding:0 !important;
}
.col-xs-4{
background:rgba(157,52,99,0.7);
}
