自举输入组动态宽度

如何使引导输入组输入元素宽度动态？我试过设置宽度：auto;但是输入组似乎仍然有一定的宽度。自举输入组动态宽度

<form class="col-sm-12 form-horizontal"> 
<div class="col-sm-6"> 
    <ul class="form-group list-inline list-unstyled"> 
    <li class="" ng-repeat="item in items"> 
     <div class="input-group list-item"> 
     <input type="text" readonly="" class="form-control" value="{{item}}" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="removeExpedition(item)"> 
      <span class="glyphicon glyphicon-remove"></span> 
      </button> 
     </div> 
     </div> 
    </li> 
    </ul> 
</div> 
</form>

和css：

.list-item>.input-group-btn { 
    width: auto; 
}

这里是一个plunker证明。查看输入和按钮之间的所有空白。我希望在输入元素旁边有一个设置填充的按钮。

来源

2016-12-05 rodney757

如果我是正确的，你需要按钮占据100％的宽度？ –

试试这个：

.list-inline > li, .input-group { 
    width: 100%; 
}

来源

2016-12-05 16:32:11

我试过这个没有运气。输入组每行转到1行 – rodney757

也许我还是不明白。你想把所有的输入组放入1行吗？ –

不一定。目前每个输入组的宽度相同。我不想那样。我希望每个输入组只有文本和“X”按钮所需的大小。我需要在文本和“X”按钮之间的每个输入组中删除多余的空格。所以输入组。因此，文本“3”的输入组不会像输入组那样宽，文本“And_one_more” – rodney757

有内置在课堂上引导来做到这一点。只是给按钮类（btn-block）

来源

2016-12-05 16:36:56

我应该在哪里添加它？似乎没有在按钮 – rodney757

添加到li元素风格display: block，并加入到div.input组类btn-block这一切

来源

2016-12-05 16:49:53 Joint

这似乎使输入组填充整个div – rodney757

哦，现在我不喜欢你想要实现的，你不能只用CSS或boostrap做到这一点，所有你需要的是这：http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value – Joint

好了，所以我能够通过使用BTN-组要做到这一点而不是输入组。输入仅用于显示一个值，所以没有必要。默认情况下，btn-group只包含它所包含的文本。

来源

2016-12-06 13:16:49 rodney757

自举输入组动态宽度

回答

相关问题