jquery - Bootstrap col-md-12，col-sm-12 不适用于 bootstrap selectpicker

Question

我需要使用 bootstrap selectpicker，如果我有大屏幕，它看起来不错，但如果我减小屏幕尺寸，我的选择分层，但我想单独显示它们。

JSFiddle：https ://jsfiddle.net/nastya2410/4o2umka6/5/

为了展示select我使用：

<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
    <select class="selectpicker show-tick">
        <option>1</option>
        <option>2</option>
    </select>
</div>

我该如何解决我的问题？谢谢！

Answer 1

您将宽度应用于 div 而不是您的选择器 您有几种解决方案：

• 应用于col-lg-2 col-md-2 col-sm-12 col-xs-12您的选择器

• 将此 css 属性添加到您的选择器：select{width:inherit;}

Answer 2

<select class="selectpicker show-tick col-xs-12">

在它工作的选择标签中使用响应类

Answer 3

您最快的方法是删除这种绝对定位样式：

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width:180px;
    left: 0;
    /* position: absolute; */ /* This is being removed */
}