Select2 的旧版引导样式问题答案

【问题标题】：Legacy Bootstrap Styling Issue with Select2Select2 的旧版引导样式问题
【发布时间】：2015-08-12 15:04:25
【问题描述】：

我正在使用旧版本的 bootstrap (2.3.2) 以及一个名为 Select2 的插件，该插件会创建一些精美的下拉菜单。我在使用 Input Group Addons 时遇到了问题。

当试图在已经变成 select2 下拉列表的选择前面放置一个插件时，它会弄乱字段的对齐/放置。

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

您对可能导致此问题的 CSS 有什么想法吗？输入组插件和表单是原生的，所以我想说 select2 正在添加一些具有填充或边距的 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>

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

【问题讨论】：

如果您有能力升级 Select2，我不妨警告您，您使用的 Select2 (3.2) 版本非常老旧且严重不足。

标签： html css twitter-bootstrap jquery-select2

【解决方案1】：

this 是您要找的吗？

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

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

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

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

【讨论】：

这似乎工作正常；我很感激。我希望它保持相同的大小字段，无论选项标签有多短，这似乎只是在 span5 中找到。

【解决方案2】：

删除“span5”类怎么样？这对我有用...

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

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

【讨论】：

【解决方案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 */
    }
}

【讨论】：