div 的大小 (.well) - Twitter Bootstrap答案

【问题标题】：Size of div (.well) - Twitter Bootstrapdiv 的大小 (.well) - Twitter Bootstrap
【发布时间】：2012-04-28 18:18:25
【问题描述】：

我正在使用 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。

有解决这个问题的办法吗？

【问题讨论】：

this problem 和你一样吗？

标签： html css twitter-bootstrap

【解决方案1】：

您的.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 都将仅适用于该部分，而不适用于您的文档的其余部分。

【讨论】：