2016-07-10 2 views
-2

enter image description hereПочему мои входные группы интервал, как этот

Я не могу за жизнь мне понять, почему у меня это странное пространство в моих входных групп. Это происходит в любом из них, которые я создаю, если я не уменьшу интервал col до меньшего, чем текстовое поле.

вот мой HTML

<div class="row"> 
        <div class="col-xs-12"> 
         <div class="form-group"> 
          <label for="cardNumber control-label col-md-3">CARD NUMBER</label> 
          <div class="input-group col-md-7"> 
           <input name="number" type="tel" class="form-control cardNumber" size="20" data-stripe="number" placeholder="Valid Card Number" autocomplete="cc-number" required autofocus /> 
           <span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> 
        <span class="input-group-addon" id="basic-addon2">example.com</span> 
       </div> 
+0

Вы должны показать свои CSS. Ваш HTML хороший, я не вижу пространства между входом и аддоном. – makshh

+0

Выглядит хорошо для меня в Chrome, Firefox и IE11: https://jsfiddle.net/ayeucszb/ Скорее всего, остальная часть вашего HTML испортила его. Пожалуйста, дайте нам что-то, что может воспроизвести проблему. – Ultimater

+0

Спасибо, ребята, осмотрев его на странице, я сузил ее до элемента css, который по умолчанию помещает по умолчанию .net устанавливает максимальную ширину ввода. –

ответ

0

Похоже, по умолчанию .net имеет этот CSS в site.css , Это вызвало мою проблему.

input, 
select, 
textarea { 
    max-width: 280px; 
} 
0

Оберните второй input-group DIV внутри строки и столбца тоже так:

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="form-group"> 
      <label for="cardNumber control-label col-md-3">CARD NUMBER</label> 
      <div class="input-group col-md-7"> 
       <input name="number" type="tel" class="form-control cardNumber" size="20" data-stripe="number" placeholder="Valid Card Number" autocomplete="cc-number" required autofocus /> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> 
        <span class="input-group-addon" id="basic-addon2">example.com</span> 
       </div> 
    </div> 
</div> 
Смежные вопросы