2017-03-05 85 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