2016-12-05 79 views
0

如何使引导输入组输入元素宽度动态?我试过设置宽度: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证明。查看输入和按钮之间的所有空白。我希望在输入元素旁边有一个设置填充的按钮。

+0

如果我是正确的,你需要按钮占据100%的宽度? –

回答

1

试试这个:

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

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

+0

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

+0

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

0

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

+0

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

0

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

+0

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

+0

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

0

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