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