Question

我正在使用遗留版本的bootstrap（2.3.2）和一个名为Select2的插件，它创建了一些奇特的下拉列表。与输入组插件一起使用时，我遇到了一个问题。

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

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

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

PSVersion            5.0 
WSManStackVersion    3.0

PSVersion            4.0 
WSManStackVersion    3.0

PSVersion            3.0 
WSManStackVersion    3.0

PSVersion            2.0
WSManStackVersion    2.0

PSVersion            1.0
WSManStackVersion    ---

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

Answer 1

this您要找的是什么？

.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

使用fiddle：

<强>＆GT;小：

<强>响应：

.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样式问题

3 个答案: