ブートストラップ入力グループの問題

Question

他のソリューションをチェックしたところ、何も動作していないようです。私はそれを試みた幅：200pxと同じ問題。私のフォームはかなり古いので、私はそれをブートストラップバージョンに変更したいと思っていました。その他、入力グループを使用している間は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>