bootstrap 多选下拉宽度 100%

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 多选不会覆盖样式。但请注意，在您的情况下 .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>

Answer 2

我使用了 .multiselect 给你的 buttonWidth 参数，类似于 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 class 内将 select 标签设置为 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 多选下拉宽度 100%

bootstrap multiselect dropdown width 100%

css

bootstrap-multiselect