如何设计boostrap选择

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

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