bootstrap динамическая ширина входной группы

Как я могу сделать динамический входной элемент входной группы начальной загрузки? Я попробовал установить ширину: авто; но группа ввода по-прежнему имеет заданную ширину.bootstrap динамическая ширина входной группы

<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

Добавить Ли элементы стиля 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-group по умолчанию является только широким, как текст, который он включает.

источник

2016-12-06 13:16:49 rodney757

bootstrap динамическая ширина входной группы

ответ

Смежные вопросы