自舉輸入組動態寬度

如何使引導輸入組輸入元素寬度動態？我試過設置寬度：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

自舉輸入組動態寬度

回答

相關問題