Настройка maxwidth на поле ввода в Bootstrap3

Question

У меня есть таблица с заголовком, и я хочу добавить входные данные в заголовки, чтобы люди могли фильтровать на столе. Например:

<table class="table table-condensed table-hover table-striped"> 
    <thead> 
    <tr> 
     <th> 
     Date Created&nbsp;<button id="btnToggleFilterDateCreated" class="btn btn-xs btn-primary"><i class="fa fa-filter"></i></button> 
     <div class="dateRangePickers"> 
      <div class="input-group date" id="dateCreatedStartFilterDiv"> 
      <span class="input-group-addon datepickerbutton"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      <input type="text" id="dateCreatedStartFilter" size="10" maxlength="10" class="form-control" readonly="readonly" /><br/> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-remove"></span> 
      </span> 
      </div> 
      <script type="text/javascript"> 
      $(function() { 
       $('#dateCreatedStartFilterDiv').datetimepicker({ }); 
      }); 
      </script> 
     </div> 
     </th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    <thead> 
    <tbody> 
    ... 
    <tbody> 
</table> 

jsFiddle http://jsfiddle.net/2u425cub/

Но как только я применяю классы Bootstrap для форматирования, мой maxwidth игнорируется и входные взрывает столбцы таблицы из. Есть ли способ сообщить Bootstrap соблюдать ограничение на 10 символов для ввода?

Answer 1

я не уверен, я понимаю ваш вопрос хорошо, но я думаю, вы должны попытаться сбросить ширину вашего входа и аддонов, см: http://jsfiddle.net/2u425cub/1

Это может быть дон, используя следующий код CSS :

.input-group .form-control, .input-group-addon, .input-group-btn { 
    width:initial; 
}