はなぜ私の入力グループがこの

Question

のように間隔を有しているか、私は私の入力グループでは、この奇妙な間隔を持っている理由私は私の人生のために把握することはできません。それは、私が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> 

Answer 1

が見えます。これは私の問題を引き起こしていた。

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

Answer 2

も、このように行と列内の2番目のinput-groupのdivをラップ：デフォルトの.NETでsite.cssで、このCSSを持っているよう

<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>