html - 如何设置 Bootstrap 选择的样式

Question

我的应用使用 bootstrap-select对于下拉菜单。但结果看起来非常不同且不受欢迎。

HTML:

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

CSS:

.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;
}

解决此问题的最佳方法是什么？我应该为 bootstrap-select 添加 CSS 吗？

Answer 1

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

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

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

jQuery
bootstrap.js
bootstrap.css

加上

bootstrap-select.css
bootstrap-select.js