自举输入组问题
问题描述:
我检查了其他解决方案,似乎没有任何工作。我试过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>
答
将边距设置为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>
谢谢!这工作得很完美。 – Daniel