twitter-bootstrap - Bootstrap响应式中的流体输入附加

Question

我一直在努力获取带有 input-append 元素的输入，以便在流畅的布局中具有正确的宽度。我正在使用 v2.0.4 的 Bootstrap。当我调整大小以使页面更小时，它会换行。理想情况下，我将输入井的全宽（如警报）。我在下面包含了标记和一些屏幕截图。非常感谢任何帮助！

<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

替换<form class="form-horiztonal">为<form id="formfilters" class="form-horiztonal">

添加以下 jQuery 代码。

function sizing() {
  var formfilterswidth=$("#formfilters").width();
  $("#msisdn").width((formfilterswidth-46)+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);​

它总是看起来不错

小的：

大的：

Answer 3

响应式 css 是造成这种情况的原因。

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

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

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

Answer 4

这是一个非常棒的纯 CSS 解决方案，没有用于布局目的的讨厌的 jQuery/JavaScript。

http://jsfiddle.net/9Ma8V/

的HTML

<div class="inline-button-input">
   <input type="submit" value="Submit"/>
   <div>
      <input type="text"/>
   </div>
</div>

CSS

input[type=text] {
   width: 100%;
}
.inline-button-input {
   width: 100%;
   float: right;
}
.inline-button-input div {
   overflow: hidden;
   padding-right: .5em;
}
.inline-button-input input[type=submit] {
   float: right;
}

Answer 5

我有一个答案和一个新问题要解决。

我创建了一个函数，它将搜索所有 input-append 并根据它们的 parent().width() 调整它们的大小。

这里：

  function sizeInputs() {
  $(document).find(".input_app").each(function(){  
    var container_width = $(this).parent().innerWidth();
    var btn_width = $(this).parent().find(".btn_app").width();
    // I don't know why but I need to add 25 here...???
    $(this).css('width', container_width-(btn_width + 25));  
  }); 

您只需要将输入分类为“.input_app”，相关按钮分类为“.btn_app”，并将它们放在一个 div 中。

这适用于除表格之外的任何地方。由于表格宽度由其元素的宽度决定，因此它是鸡蛋和鸡肉的困境。如果你放大表格，它可以工作，但如果你缩小它的宽度，它就不行。

所有这些都可以在 Fiddle input-append中查看

如果有人对如何解决表格调整大小问题有任何想法，将不胜感激。