css - 在 twiiter-bootstrap 中使用带选择的输入组的替代标准代码

Question

我在 Bootstrap 中有这段代码:

<div class="input-group" id="adv-search">
    <select  class="form-control"  >
        <option value="0" selected>All Snippets</option>
        <option value="1">Featured</option>
    </select>
    <div class="input-group-btn">
        <div class="btn-group" role="group">
            <div class="dropdown dropdown-lg">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                <div class="dropdown-menu dropdown-menu-right" role="menu">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="filter">Filter by</label>
                            <select class="form-control">
                                <option value="0" selected>All Snippets</option>
                                <option value="1">Featured</option>
                                <option value="2">Most popular</option>
                                <option value="3">Top rated</option>
                                <option value="4">Most commented</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

我在 http://www.bootlint.com/ 中检查了我的代码. 但是我有这个错误:

.input-groupcontains a <select>; this should be avoided as <select> s cannot be fully styled in WebKit browsers

所以我不能将 input-group 与 select 一起使用!

是否有在 Bootstrap 中执行此操作的标准方法？

Answer 1

Bootlint 将您 Bootstrap 至错误 E006

non- .form-control within .input-group

你应该使用 form-group而不是这样的输入组:

<div class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>