使用bootstrap的新手,我遇到了一个div矩形问题,我想在页面顶部展开全宽(很像顶部的SO灰条)。我已经尝试调整到100%并重置边距,但没有任何工作。我也尝试从容器div中取出矩形,但随后它消失了:(。然后我尝试将矩形改为井,但似乎不想让我将其高度设置为20px。
我已经尝试了大部分重新排列div或使用了SO上建议的!important,但是,无论出于何种原因,div都没有合作。根据我的老板要求,我只想在页面顶部展开一个蓝色条:P
我有点沮丧,想知道是否有人可以帮助我?
<body>
<div class="container">
<div class="rectangle span12"></div>
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
和CSS
body {
padding-left: 0;
padding-right: 0;
}
/* Set floating dom-heading margins to 0 */
[class*="dom-heading"] {
margin: 0;
}
.container .rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
网站:intervalmed.com
答案 0 :(得分:0)
HTML:
<body>
<div class="navbar rectangle">
<div class="container-fluid">
<!--menu items-->
</div>
</div> <!-- .navbar -->
<div class="container">
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
CSS:
.rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
答案 1 :(得分:0)
如果您只想将条形图放在顶部,则可以将边框设置为<body>
body {
border-top: solid 20px #1f2f5f;
}
如果你想要一个具有文档宽度100%的实际<div>
,那么它应该在容器之外,因为容器是用max-width
包装东西的容器
所以只需将div移到容器外面并在CSS中明确设置高度(<div>
元素将始终填充它的父级宽度)
<强> HTML 强>
<body>
<div class="rectangle"></div>
<!-- THE REST OF YOUR PAGE -->
</body>
<强> CSS 强>
.rectangle {
background: #1f2f5f;
height: 20px;
}