Bootstrap 4選擇樣式

Question

在我的Bootstrap v4表單中，我增加了form-control元素的填充，但我注意到此填充未應用於select元素。

 .form-control { padding: .6rem .8rem !important; border: 2px solid #ced4da !important; transition: none !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <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> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> </div> </div> 

不幸的是，我無法構建Bootstrap的自定義版本，因此我必須通過應用純CSS來覆蓋行為。

我創建了一個演示問題的JSFiddle 。

如何在Bootstrap v4表單中將填充正確地應用到select元素？

Answer 1

您嘗試將填充應用於Bootstrap 4 form-control元素的方式不正確。 因為Bootstrap 4具有專門設計用於滿足您所有間距需求的本機類。 並且還因為這樣的css hack可以（而且經常）導致導致需要更多css hack來解決由原始css hack引起的問題的問題。

因此，請使用p-*和m-*類為元素應用間距，並避免不必要的破壞。

有關Bootstrap 4間隔實用程序的更多信息：

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是專門為易於樣式設計的，因為普通選擇是如此之多（沒有太多可做的事情）。

這是一個帶有自定義選擇的代碼段，用於比較：

 <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> 

Answer 2

填充方式正確，但是您必須更改高度

select.form-control{
  height:auto !important;
}

https://jsfiddle.net/oon0pmup/3/

Answer 3

在CSS選擇器上使用更多特性來覆蓋Bootstrap高度：

select.form-control:not([size]):not([multiple]) {
    height: initial;
}

選擇的高度將與文本輸入的高度相同（假設所有輸入均使用相同的填充，邊框等）。

https://www.codeply.com/go/rJKOyAx1QA