Question

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

Answer 1

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%;

 }

Answer 2

如果您只想将条形图放在顶部，则可以将边框设置为<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;
}

bootstrap矩形全宽不起作用

2 个答案: