Select2的旧版Bootstrap样式问题

Question

我正在使用旧版引导程序（2.3.2）以及名为Select2的插件，该插件会创建一些精美的下拉菜单。 将其与输入组插件一起使用时遇到问题。

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

这是非常基本的形式代码，因此我必须假定引导问题的CSS或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>

这是示例的小提琴： http : //jsfiddle.net/bs6b4fu7/1/

Answer 1

这是您要找的东西吗？

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

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

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

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

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

Answer 3

玩弄小提琴 ：

>小：

响应式：

.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 */
    }
}