CSS bootstrap 多选下拉宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39177989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap multiselect dropdown width 100%
提问by BeniaminoBaggins
I have been using bootstrap multiselectin my web app for about 9 months now. I've been styling the width of the dropdown to be 100% like this:
我已经在我的网络应用程序中使用引导程序多选大约 9 个月了。我一直将下拉菜单的宽度设置为 100%，如下所示：
ul.multiselect-container {
width: 100% !important;
}
.dropdown-menu {width:100% !important;}
I just got the new version because it had an extra configuration option (onDeselectAll). Now the dropdown width is not 100%. Looking at the styling in the elements console it looks like my css should still work:
我刚刚得到了新版本，因为它有一个额外的配置选项 (onDeselectAll)。现在下拉宽度不是 100%。查看元素控制台中的样式，看起来我的 css 应该仍然有效：
We can see in the photo of the css that .dropdown-menu {width:100% !important}is being overridden but I'm not sure what by.
我们可以在.dropdown-menu {width:100% !important}被覆盖的 css 照片中看到，但我不确定是什么原因。
Any ideas?
有任何想法吗？
回答by Tony L.
I used the buttonWidthparameter that .multiselectgives you similar to David Stutz. However, I put the '100%'right in the parameter.
我使用了类似于 David Stutz的buttonWidth参数.multiselect。但是，我'100%'在参数中放了正确的。
<body>
<select id="multiselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect').multiselect({
buttonWidth: '100%'
});
//caret is in the middle, switch it to right
$(".caret").css('float', 'right');
$(".caret").css('margin', '8px 0');
});
</script>
</body>
回答by David Stutz
The below minimal example is working fine, so Bootstrap Multiselect is not override the styling. But note that in your case .dropdown-menuand .multiselect-containerrefer to the very same elements (the ul, like in the example below. So applying the styling to both classes, like you did is not necessary and may cause what you see in the inspector.
下面的最小示例工作正常，因此 Bootstrap Multiselect 不会覆盖样式。但请注意，在您的情况下，.dropdown-menu并.multiselect-container引用完全相同的元素（ul，就像下面的示例中一样。因此，不需要像您那样将样式应用于两个类，并且可能会导致您在检查器中看到的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#multiselect').multiselect({
buttonWidth: '400px'
});
});
</script>
<style type="text/css">
.multiselect-container {
width: 100% !important;
}
</style>
</head>
<body>
<select id="multiselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</html>回答by Hien Nguyen
I tried setup buttonWidthand .multiselect-containerbut it did not work for me.
我尝试过设置buttonWidth，.multiselect-container但它对我不起作用。
This is my way to set select tag to 100% within form-groupclass, it may help someone.
这是我在form-group课堂上将选择标签设置为 100% 的方法，它可能对某人有所帮助。
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.css" />
<style>
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="tags">Select tags list</label>
<div class="form-group">
<select class="selectpicker input-large" multiple data-live-search="true">
<option>COAL_5CD-PT07</option>
<option>COAL_5CD-PT08</option>
<option>COAL_5CD-PT09</option>
<option>LNG_TI37130</option>
<option>LNG_TI37230</option>
<option>CCP_AB1HAD45CP900_ZQ01</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function () {
$('select').selectpicker();
});
</script>
</body>
</html>