bootstrap矩形全宽不起作用

时间:2013-08-13 14:45:18

标签: html twitter-bootstrap

使用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

2 个答案:

答案 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;
}