Html div (.well) 的大小 - Twitter Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10190725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Size of div (.well) - Twitter Bootstrap
提问by user1026090
I'm building a website with Twitter Bootstrap, fluid layout. I have my content on the left and a little menu on the right, I want the menu to be in a 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>
The problem is that the well doesn't have enough heigth to contain all the links in the menu. I don't want to set the height manually because the menu is generated by PHP and I don't want it to be larger than necessairy.
问题是井没有足够的高度来包含菜单中的所有链接。我不想手动设置高度，因为菜单是由 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>
This makes the well big enough to contain all the links, but it makes the span3 div too large, it doesn't fit next to the span9 div anymore.
这使得井足够大以包含所有链接，但它使 span3 div 太大，它不再适合 span9 div 旁边。
Any solutions to this problem?
这个问题有什么解决方案吗？
回答by Andres Ilich
Your .wellis not properly wrapping because the buttons are being floated. Just define them as float:nonein your stylesheet (not the bootstrap.css stylesheet) and it should work.
您.well没有正确包装，因为按钮正在浮动。只需将它们定义为float:none您的样式表（而不是 bootstrap.css 样式表），它应该可以工作。
HTML
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
CSS
.menu .btn {
float:none;
}
Note:I defined a .menuclass to target your .wellsection, that way any css you modify from the bootstrap will only apply to that section and not the rest of your document.
注意：我定义了一个.menu类来定位您的.well部分，这样您从引导程序修改的任何 css 将仅适用于该部分，而不适用于文档的其余部分。
