2017-03-05 151 views
0

我檢查了其他解決方案,似乎沒有任何工作。我試過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的邊距。 This is what it looks for me

回答

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>

+0

謝謝!這工作得很完美。 – Daniel