0

使用引导程序的新手，并且在使用 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

4

2 回答 2

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

 }
于 2013-08-13T17:09:16.067 回答
0

如果你只想要顶部的栏，你可以设置一个边框<body>

body {
    border-top: solid 20px #1f2f5f;
}

如果您想要一个<div>具有 100% 文档宽度的实际值，那么它应该在容器之外，因为容器是用max-width

因此，只需将您的 div 移到容器外并在您的 CSS 中明确设置高度（<div>元素将始终填充它的父宽度）

HTML

<body>
    <div class="rectangle"></div>
    <!-- THE REST OF YOUR PAGE -->
</body>

CSS

.rectangle {
    background: #1f2f5f;
    height: 20px;
}
于 2013-08-13T17:49:02.160 回答