自舉輸入組問題

Question

我檢查了其他解決方案，似乎沒有任何工作。我試過width：200px仍然是同樣的問題。我的表單很老，所以我想把它改成bootstrap版本。其他人，雖然使用輸入組有像1px differece。對我來說更大。
我會離開這裏的形式，也許有些東西會爲我工作。

.form-control{ 
 
    margin-top:10px; 
 
    margin-bottom: 10px; 
 
} 
 
label{ 
 
    color:#03A0D3; 
 
    font-size: 15px; 
 
    margin-right:10px; 
 
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<form id="updatesettings" method="post"> 
 

 
    <label for="link">WEBSITE LINK</label> 
 
    <div class="input-group"> 
 
    <input type="text" name="link" class="form-control" placeholder="LINK"> 
 
    <span class="input-group-addon"><span class="fa fa-check green"></span></span> 
 
    </div> 
 

 
    <label for="email">E-MAIL</label> 
 
    <div class="input-group"> 
 
    <input type="text" name="email" class="form-control" placeholder="E-MAIL"> 
 
    <span class="input-group-addon"><i class="fa fa-check green"></i></span> 
 
    </div> 
 

 
    <div class="btn-group"> 
 
    <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li> 
 
     <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li> 
 
    </ul> 
 
    </div> 
 
    <button type="submit" class="btn btn-primary">Save</button> 
 
</form>

如果我嘗試添加輸入和它不工作形式等要素之間的一些餘量。我想保持標籤接近輸入，並在標籤頂部保留10px的邊距。

Answer 1

將邊距設置爲class="input-group" ..而不是form control class。這是破壞佈局。

工作實例

.input-group{ 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
label{ 
 
    color:#03A0D3; 
 
    font-size: 15px; 
 
    margin-right:10px; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <form id="updatesettings" method="post"> 
 

 
       <label for="link">WEBSITE LINK</label> 
 
       <div class="input-group"> 
 
       <input type="text" name="link" class="form-control" placeholder="LINK"> 
 
       <span class="input-group-addon" id="ln"><i class="fa fa-times red"></i></span> 
 
       
 
      </div> 
 

 
       <label for="email">E-MAIL</label> 
 
       <div class="input-group"> 
 
       <input type="text" name="email" class="form-control" placeholder="E-MAIL"> 
 
       <span class="input-group-addon"><i class="fa fa-check green"></i></span> 
 
      </div> 
 

 
      <div class="btn-group"> 
 
       <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li> 
 
       <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li> 
 
       </ul> 
 
      </div> 
 
\t \t  <button type="submit" class="btn btn-primary">Save</button> 
 
\t \t  </form>