流体输入 - 附加在Bootstrap响应中

Question

我一直在努力获得带有input-append元素的输入,以便在流畅的布局中获得正确的宽度.我正在使用Bootstrap的v2.0.4.当我调整大小以使页面变小时,它会打破换行符.理想情况下,我输入井的全宽(如警报).我已经在下面添加了标记和一些截图.任何帮助非常感谢!

<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>

Answer 1

因为你input是a .span10,按钮应该是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>

但按钮的行为从根本上改变了.你可以用这个css修复它:

.input-append .btn {
    float: none!important;
    margin-left: 0!important;
}

更准确地说,按钮应该大到.span2加号fluidGridGutterWidth.这是width: 17.02127659%根据默认值.

Answer 2

响应式 CSS 就是导致这个问题的原因。

通过使用覆盖一些响应式CSS

  #msisdn {
    width: 75%;
    display: inline-block;
  }

希望你能看到发生了什么。希望这会让你足够接近。