引导输入组问题

Question

我检查了其他解决方案，似乎没有任何效果。 我尝试了width：200px ，仍然是同样的问题。 我的表单很旧，因此我想将其更改为引导程序版本。 其他人在使用input-group时有1px的差异。 对我来说更大。
我将在此处保留表格，也许对我有用。

 .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> <button type="submit" class="btn btn-primary">Save</button> </form>