Question

我已经在我的网络应用中使用了bootstrap multiselect大约9个月了。我一直在设计下拉列表的宽度为100％：

    ul.multiselect-container {
      width: 100% !important;
    }

.dropdown-menu {width:100% !important;}

我刚刚获得了新版本，因为它有一个额外的配置选项（onDeselectAll）。现在下拉宽度不是100％。看看元素控制台中的样式，看起来我的css应该仍然可以工作：

我们可以在css的照片中看到.dropdown-menu {width:100% !important}被覆盖但我不确定是什么。

有什么想法吗？

Answer 1

以下最小示例工作正常，因此Bootstrap Multiselect不会覆盖样式。但请注意，在您的情况下，.dropdown-menu和.multiselect-container引用了相同的元素（ul，如下例所示。因此，将样式应用于这两个类，就像您所做的那样必要的，可能会导致您在检查员看到的内容。

＆＃13;

<!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>

＆＃13;

Answer 2

我使用了buttonWidth给你的.multiselect类似于David Stutz的参数。但是，我将'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>

Answer 3

我尝试设置buttonWidth和.multiselect-container，但对我来说不起作用。

这是我在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>

bootstrap multiselect下拉宽度100％

3 个答案: