Select2 的遗留 Bootstrap 样式问题

Question

我使用的是 bootstrap (2.3.2) 的旧版本以及一个名为 Select2 的插件，它创建了一些精美的下拉菜单。在将它与输入组插件一起使用时，我运行遇到了问题。

当试图将插件放在已变成 select2 下拉列表的 select 前面时，它弄乱了字段的 alignment/placement。

这是非常基本的表单代码，所以我必须假设是 bootstrap 或 select2 中的 CSS 导致了问题：

关于 CSS 可能导致此问题的任何想法？输入组插件和表单是原生的，所以我想说 select2 正在添加一些 CSS，这些 CSS 具有导致此问题的填充或边距。

<form class="form-horizontal" name="submitRequest" id="submitRequest" method="post" action="requestContentv2.php">
<div class="control-group">
    <label class="control-label"><small>Request Type</small>
    </label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"><i class="icon-list-alt"></i></span>

            <select class="span5" id="e1">
                <option></option>
                <option value="Create New">Create New</option>
                <option value="Delete/Remove">Delete/Remove</option>
            </select>
        </div> <span class="help-block"><small>Select a request type from the list above.</small></span>

    </div>
</div>

这是一个 fiddle 的例子： http://jsfiddle.net/bs6b4fu7/1/

Answer 1

this是您要找的吗？

.select2-container {
  margin:0;
}
.add-on{
    float:left;
}

注意 - 您是否希望它在较小的尺寸上不折叠？

更新 - 您将希望使用此媒体查询来覆盖 bootstrap 的旧媒体查询。

@media screen and (max-width: 767px) {
.span5 {
    width: 380px;
}
}

Answer 2

删除 "span5" class 怎么样？这对我有用...

<form class="form-horizontal" name="submitRequest" id="submitRequest" method="post" action="requestContentv2.php">
<div class="control-group">
    <label class="control-label"><small>Request Type</small>
    </label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"><i class="icon-list-alt"></i></span>

            <select id="e1">
                <option></option>
                <option value="Create New">Create New</option>
                <option value="Delete/Remove">Delete/Remove</option>
            </select>
        </div> <span class="help-block"><small>Select a request type from the list above.</small></span>

    </div>
</div>

出于 Fiddle 的目的，我还删除了第一个 <option> 标签 https://jsfiddle.net/bs6b4fu7/3/

Answer 3

玩弄fiddle：

>小：

有反应：

.input-prepend .select2-container .select2-choice {
    font-size:14px;
    line-height:20px;
    height:20px;
    padding-top:4px;
    padding-bottom:4px;
    border-radius: 0px 4px 4px 0px;
}
.input-prepend {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;    
}
.add-on {
    float: left;
}
[class*="span"].select2-container {
    width: 100%;
    margin-left: 0;
    float: none;
    min-width: 320px;

    @media (max-width: 767px) {
        /* responsive styles */
    }
}

Select2 的遗留 Bootstrap 样式问题

Legacy Bootstrap Styling Issue with Select2

html

css

twitter-bootstrap

jquery-select2