如何设置引导选择的样式答案

<div class="form-group"> <input type="text" class="form-control" placeholder="Enter your name"> <input type="text" class="form-control" placeholder="Enter your address"> <input type="text" class="form-control" placeholder="Enter your contact info"> <select class="selectpicker form-control"> <option selected="selected">Select one</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div>

.form { max-width: 330px; padding: 15px; padding-top: 120px; margin: 0 auto; } .form .form-heading { margin-bottom: 20px; text-align: center; } .form .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form .form-control:focus { z-index: 2; } .form input[type="text"] { margin-bottom: -1px; border-radius: 0; }

【解决方案1】：

我对此进行了测试，对我来说效果很好：

http://codepen.io/calebanth/pen/grKzkB

您还记得使用所有依赖项吗？你需要：

jQuery
bootstrap.js
bootstrap.css

加号

bootstrap-select.css
bootstrap-select.js

【讨论】：

是的，我都有
@jebmarcus 您的代码中一定还有其他我们看不到的东西导致了问题。你能发布你的整个代码吗，最好是在 CodePen 或 JSFiddle 中？
我进入了你创建的代码笔并在“
”之前添加了一个“
”，如果你尝试的话，你会查看错误
@jebmarcus 我刚刚更新了 CodePen 并将 class="form-group" 更改为 class="form"，它看起来仍然很好，我无法让它与您最初发布的图像相匹配。

【解决方案2】：

以下是您正在尝试执行的操作的基本示例。如果您查看 bootstrap-select 样式表或检查浏览器中的元素，您将能够看到您需要定位的内容，因为 bootstrap-select 添加了一个下拉按钮select 字段。

工作示例：

$('.selectpicker').selectpicker();

.form {
  max-width: 330px;
  padding: 15px;
  margin: 120px auto 0;
}
.form .form-control {
  font-size: 16px;
  padding: 10px;
  height: auto;
  border-radius: 0;
  margin: 0;
}
.form .bootstrap-select {
  padding: 0;
  height: auto;
}
.form .dropdown-toggle {
  border-radius: 0;
  padding: 10px;
}
.form .dropdown-menu {
  border-radius: 0;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">

  <div class="form">

    <div class="form-group">
      <input type="text" class="form-control" placeholder="Enter your name">
      <input type="text" class="form-control" placeholder="Enter your address">
      <input type="text" class="form-control" placeholder="Enter your contact info">
      <select class="selectpicker form-control">
        <option selected="selected">Select one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

【讨论】：