div的大小（.well） - Twitter Bootstrap

我正在用Twitter Bootstrap，流體佈局構建一個網站。我在左邊有我的內容，在右邊有一個小菜單，我想讓菜單在一口井中。div的大小（.well） - Twitter Bootstrap

<div class="row-fluid"> 
    <div class="span9">...</div> 
    <div class="span3"> 
     <div class="well" style="height: 100%;"> 
      <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i> Een project toevoegen</a> 
      <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i> Alle projecten bekijken</a> 
      <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i> Deze lijst afdrukken</a> 
     </div> 
    </div> 
</div>

問題是井沒有足夠的高度來包含菜單中的所有鏈接。我不想手動設置高度，因爲菜單是由PHP生成的，我不希望它比必需的大。

<div class="row-fluid"> 
    <div class="span9">...</div> 
    <div class="span3 well"> 
     <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i> Een project toevoegen</a> 
     <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i> Alle projecten bekijken</a> 
     <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i> Deze lijst afdrukken</a> 
    </div> 
</div>

這使得好大到足以容納所有鏈接，但它使span3 DIV太大，它不適合旁邊span9 DIV了。

對此問題的任何解決方案？

來源

2012-04-17 user1026090

是[此問題]（http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh）你有嗎？ – Edu 2012-04-17 12:14:22

您的.well未正確包裝，因爲按鈕正在浮動。只需在你的樣式表（不是bootstrap.css樣式表）中將它們定義爲float:none並且它應該可以工作。

HTML

<div class="row-fluid"> 
    <div class="span9">...</div> 
    <div class="span3"> 
     <div class="well menu"> 
      <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i> Een project toevoegen</a> 
      <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i> Alle projecten bekijken</a> 
      <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i> Deze lijst afdrukken</a> 
     </div> 
    </div> 
</div>

CSS

.menu .btn { 
    float:none; 
}

注：我定義了一個.menu類定位您.well部分，這樣，任何CSS，你從引導修改將僅適用於該部分，而不適用於文檔的其餘部分。

來源

2012-04-17 12:20:36

工作完美，非常感謝！ – user1026090 2012-04-17 12:37:41

div的大小（.well） - Twitter Bootstrap

回答

相關問題