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>

enter image description here

Answer 1

由于input是.span10，因此按钮应为.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);

而且总体上看起来不错

<强>小：

enter image description here

<强>大

enter image description here

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

除了表格之外，这种方法无处不在。由于餐桌宽度由其元素的宽度，鸡蛋和鸡的困境决定。如果放大表格，它会起作用，但如果你减小它的宽度，它就不会。

所有这些都可以在小提琴input-append

中查看

如果有人知道如何解决表调整大小问题，那将非常感激。

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

5 个答案: