我使用最新的 Twitter Bootstrap 框架创建了以下设置:
http://jsfiddle.net/hfexR/2/
现在,当旁边没有按钮时,我希望输入字段占据最大宽度。
使用纯 CSS 或 Twitter Bootstrap 本身如何实现这一点?
类似于 inline-block 应该有效,但我目前还不太明白...
使用纯 CSS 或 Twitter Bootstrap 本身如何实现这一点?
类似于 inline-block 应该有效,但我目前还不太明白...
您可以像这个 代码片段 中使用 input-block-level 类。
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
编辑:自从Bootstrap v3以来,类已经发生了变化,因此请使用col-xx-X类来获得下面解释的结果(可能需要进一步更改)
您可以使用.row-fluid
并使用.spanX
使输入框填充其容器:
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
看起来按钮/输入组合需要进行一些小修复:
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
.spanX
和 .well
结合在一起,因为它们具有 padding
、边框和其他属性,这里是 为什么不应该这样做的示例(jsfiddle)。
.span4
和.well
结合在一起。你尝试过在.well
中使用.row-fluid
和 span 吗? - Sherbrow