Bootstrap Responsive 中的流体输入追加
[英] Fluid input-append in Bootstrap Responsive
本文介绍了Bootstrap Responsive 中的流体输入追加的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在努力使用 input-append 元素获取输入,以便在流畅的布局中具有正确的宽度.我正在使用 Bootstrap 的 v2.0.4.当我调整大小以缩小页面时,它会中断到换行符.理想情况下,我会输入井的全宽(如警报).我在下面包含了标记和一些屏幕截图.非常感谢任何帮助!
<div class="span3 well"><form class="form-horiztonal"><h2>过滤器</h2><字段集><div class="control-group"><label class="control-label" for="msisdn">MSISDNs</label><div class="控件"><div class="input-append"><input class="span10" id="msisdn" size="" type="text" name="msisdn"><buttonclass="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button>
</fieldset></表单>
<div class="span9"></div>
解决方案
因为你的 input
是一个 .span10
,所以按钮应该是一个 .span2代码>.
<input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button>
但是按钮的行为发生了根本性的变化.你可以用这个 css 修复它:
.input-append .btn {浮动:无!重要;左边距:0!重要;}
更准确地说,按钮应该与 .span2
加上 fluidGridGutterWidth
一样大.这是width: 17.02127659%
根据默认值.
I've been struggling to get an input with an input-append element to have the correct width in a fluid layout. I'm using v2.0.4 of Bootstrap. As I resize to make the page smaller it breaks onto a newline. Ideally I'd have the input the full width of the well (like the alerts). I've included the markup and some screenshots below. Any help much appreciated!
<div class="row-fluid">
<div class="span3 well">
<form class="form-horiztonal">
<h2>Filters</h2>
<fieldset>
<div class="control-group">
<label class="control-label" for="msisdn">MSISDNs</label>
<div class="controls">
<div class="input-append">
<input class="span10" id="msisdn" size="" type="text" name="msisdn"><button
class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="span9"></div>
</div>
解决方案
Since your input
is a .span10
, the button should be a .span2
.
<div class="input-append">
<input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button>
</div>
But the behavior of the button radically changes. You can fix it with this css :
.input-append .btn {
float: none!important;
margin-left: 0!important;
}
And to be even more precise, the button should be as large as a .span2
plus the fluidGridGutterWidth
. Which is width: 17.02127659%
according to the default values.
这篇关于Bootstrap Responsive 中的流体输入追加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!