您尝试将填充应用于引导4的方式
form-control
元素不正确。因为Bootstrap 4有专门设计的本机类来满足所有间距需求。此外,因为应用这样的css黑客可以(而且经常会)导致问题,需要更多的css黑客来修复原始css黑客造成的问题。
所以,使用
p-*
和
m-*
类将间距应用于元素并避免不必要的修改。
有关Bootstrap 4 spacing Utility的详细信息:
https://getbootstrap.com/docs/4.0/utilities/spacing/
编辑:
要解决自定义css的问题,需要添加以下规则:
select.form-control{
height: auto !important;
padding: .6rem .8rem calc(.6rem + 1px) .8rem !important;
}
以下是完整的工作代码段(单击“运行代码段”并展开到全屏以进行比较):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.form-control {
padding: .6rem .8rem !important;
border: 2px solid #ced4da !important;
transition: none !important;
}
select.form-control{
height: auto !important;
padding: .6rem .8rem calc(.6rem + 1px) .8rem !important;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
<div class="form-group col-md-6">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Test</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Choose... (normal input for comparison)">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
编辑2:
更好的解决方案是使用
.custom-select
因为正常的选择本身就是错误的。这个
custom-select
是专为简单的造型而设计的,因为普通的select车太多了(而且没什么可做的)。
下面是一个带有自定义选择的代码段,用于比较:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.form-control {
padding: .6rem .8rem !important;
border: 2px solid #ced4da !important;
transition: none !important;
}
select.form-control{
height: auto !important;
padding: .6rem .8rem calc(.6rem + 1px) .8rem !important;
}
.custom-select {
height: auto !important;
padding: .6rem .8rem !important;
border: 2px solid #ced4da !important;
transition: none !important;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
<div class="form-group col-md-6">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Test</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Choose... (normal input for comparison)">
</div>
<div class="form-group col-md-6">
<label for="inputState">custom-select:</label>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Choose... (custom-select)</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Test</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Choose... (normal input for comparison)">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
