如何在填充

<body> 
<div class="container"> 
    <div class="navbar1 navbar navbar-inverse"> 
     <div class="navbar-inner"> 
      <ul class="nav pull-right"> 
       <li><a href="#">sign in</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!--/container NAVBAR--> 

<div class="container"> 
    <div class="row-fluid"> 
     <div class="header"> 
      <div class="span12"> 
       <h1> Hello World</h1> 
      </div> 
     </div><!--/inner-wrapper--> 
    </div><!--/row-fluid--> 
</div><!--/container--> 
</body>

编辑如何在填充

添加背景图片或颜色在这个类，如跨度**，导航栏，排液，容器创建默认填充。

看看这个页面：http://jsfiddle.net/SjYyj/1/

有“头”级和“导航栏”之间的差距！如何删除，而不需要调整填充！

来源

2013-02-10 Surya

agam360的答案似乎是正确的，但它是很难知道没有一个演示。这里有一个开始：http://jsfiddle.net/vYVG9/ – isherwood 2013-02-10 18:21:38

@isherwood请再次检查上面的问题（编辑） – Surya 2013-02-10 18:29:42

看起来就像我连接的小提琴，但我的显示你的问题修复。:-) – isherwood 2013-02-10 18:32:59

编辑 - 更新：
好了，你基本上要填充的区域设定为背景色，在不改变填充。
我能想到的最简单的解决方案是：
用固定剂类包装整个“后端”，并为其提供背景色。
HTML：

<!DOCTYPE html> 
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en"> 

    <head> 
     <title>Home</title> 
     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" 
     rel="stylesheet"> 
    </head> 

    <body> 
     <div class="fixpadding"><!--Fixer--> 
      <div class="container"> 
       <div class="navbar1 navbar navbar-inverse"> 
        <div class="navbar-inner"> 
         <ul class="nav pull-right"> 
          <li><a href="#">sign in</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <!--/container--> 
      <div class="container"> 
       <div class="row-fluid"> 
        <div class="header"> 
         <div class="span12"> 
           <h1> Hello World</h1> 

         </div> 
        </div> 
        <!--/inner-wrapper--> 
       </div> 
       <!--/row-fluid--> 
      </div> 
      <!--/container--> 
     </div> 
     <!--End Fixer--> 
     <script src="./js/jquery.min.js"></script> 
     <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
    </body> 

    </html>

CSS：

.header { 
    background-color: grey; 
} 
.fixpadding { 
    background-color: grey; 
    border-radius:4px 4px 0 0; /* Fine-tuning with nav bar */ 
}

Try it out。

编辑2：

您可能会看到，如果你调整窗口的大小，背景颜色将“传播出”。为了解决这个问题，我已经扭曲身体的所有与容器，并设置一些更多的CSS：
HTML：

<div class="container"> 
     <div class="fixpadding"> 
     ... 
     </div> 
<!--End Fixer--> 
</div>

CSS：

.header { 
    background-color: grey; 
} 
.fixpadding { 
    background-color: grey; 
    background-size: contain; 
    border-radius:4px 4px 0 0;/* Fine-tuning with nav bar*/ 
}

Check it out.

编辑3：

您无法专门填充填充区域。
我做了一些更改以向您显示您可以执行的操作：
Try it here.
红色和绿色都在那里，您可以看到影响。
我已经将CSS硬编码到html中，因此您不需要与选择器混淆。
HTML：

<!DOCTYPE html> 
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en"> 
<head> 
    <title>Home</title> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
</head> 

<body> 
    <div class="container" style="background-color:red;border-radius:4px 4px 0 0;"> 
    <div class="navbar1 navbar navbar-inverse"> 
     <div class="navbar-inner"> 
      <ul class="nav pull-right"> 
       <li><a href="#">sign in</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!--/container--> 

<div class="container" style="background-color:green;"> 
    <div class="row-fluid"> 
     <div class="header"> 
      <div class="span12"> 
       <h1> Hello World</h1> 
      </div> 
     </div><!--/inner-wrapper--> 
    </div><!--/row-fluid--> 
</div><!--/container--> 
<script src="./js/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 

</body> 

</html>

来源

2013-02-10 18:12:42 funerr

请再次检查上面的问题（编辑） – Surya 2013-02-10 18:30:01

@Surya，答案更新。 – funerr 2013-02-10 21:55:20

我觉得你没有明白！我只想要背景的头部！ – Surya 2013-02-11 12:53:55

回答

相关问题