Question

在bootstrap文档中，他们的输入组跨度为100％，没有额外的标记：http://getbootstrap.com/components/#input-groups

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

如果没有在width: 100%上明确定义input-group，我似乎无法让我的输入组达到100％。请注意，我已稍微调整一下标记：

<div class="input-group">
    <input class="form-control" placeholder="Auto width" />
    <div class="clear">
        <a href="#" class="glyphicon glyphicon-remove"></a>
    </div>
</div>

CSS：

.clear { display: table-cell; }

我创造了一个代表这个问题的小提琴：http://jsfiddle.net/Wexcode/B9LMN/

Answer 1

将width: 1%添加到input元素的兄弟会修复此问题：

.clear { width: 1%; display: table-cell; }

请参阅http://jsfiddle.net/Wexcode/B9LMN/2/

Answer 2

input-group具有display: table css属性，而<input class="form-control"具有display: table-cell css属性。

<div class="input-group"> <!-- this is display: table -->
  <input type="text" class="form-control"> <!-- this is display: table-cell -->
  <span class="input-group-addon">.00</span> <!-- this is display: table-cell -->
</div>

根据HERE，在“表的重要风格规则”下，

Width works on table cells just about how you would think it does, except when there is 
some kind of conflict. For instance if you tell the table itself to be 400px wide then the 
first cell of a three-cell row to be 100px wide and leave the others alone, that first cell
will be 100px wide and the other two will split up the remaining space.

它解释了如果定义了具有width的子元素的table-cell（让我们说width: 100px），那么下一个具有table-cell属性的子元素，尽管未定义，将填补其余空间。

Answer 3

让input-group拉伸到最大宽度的一种方法似乎是input-group-addon 100％宽度之一：

<div class="input-group" style="width:100%;">
  <span class="one input-group-addon">one</span>
  <span class="two input-group-addon">two</span>
  <span class="tre input-group-addon" style="width:100%">tre</span> <!-- here -->
  <span class="for input-group-addon">for</span>
  <span class="fiv input-group-addon">fiv</span>
  <span class="input-group-btn"> 
     <button class="btn" type="button">x</button> 
  </span>
</div>

Answer 4

<div class="container">
<h3>Form widths</h3>

<form role="form">
  <div class="form-group">
    <label>Auto width</label>

    <div class="input-group">
      <input class="form-control" placeholder="Auto width" /> <span class=
      "input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span>
    </div>
  </div>

  <div class="form-group">
    <label>100% width</label>

    <div class="input-group" style="width: 100%">
      <input class="form-control" placeholder="100% width" /> <span class=
      "input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span>
    </div>
  </div>
</form>
</div>

Answer 5

如果您将select2作为“输入组”的一部分，则最好使用“resolve”参数创建它：

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

bootstrap 3输入组100％宽度

5 个答案: