如何在填充

<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

回答

相關問題