Question

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

这个问题的任何解决方案？

Answer 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都只适用于该部分，而不适用于其他部分你的文件。

div的大小（.well） - Twitter Bootstrap

1 个答案: