Question

如何将bootstrap 3.0中下拉触发按钮的宽度设置为等于下拉列表的宽度？与使用bootstrap-select（http://silviomoreto.github.io/bootstrap-select/）时所实现的类似。我试图将整个列表包含在一个带有col- *类的div中，但这似乎不起作用：

<div class="row">
<div class="col-xs-4 col-md-4">
    <div class="dropdown">
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
          </ul>
    </div>
</div>

因此，我想：button width =下拉菜单list = col- * width。

Answer 1

我通过设置下拉菜单和按钮宽度= 100％来找到解决方案。

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

现在，按钮和下拉列表的宽度都相同，由列宽控制。

Answer 2

如果我理解正确您希望根据较大的选项设置菜单宽度的样式，则必须覆盖min-width列表的.dropdown-menu属性，如：

.dropdown-menu {
    min-width: 0px !important;
}

演示：http://jsfiddle.net/faxyz/4/

Answer 3

当下拉列表变得太小时，您可以设置.dropdown-toggle.的宽度我建议使用text-overflow省略号。没有必要设置.dropdown-menu样式。如果要在.input-group中使用，请将下拉列表的宽度设置为任何其他值。

.dropdown-toggle {   
    overflow: hidden;
    padding-right: 24px /* Optional for caret */;
    text-align: left;
    text-overflow: ellipsis;    
    width: 100%;
}

/* Optional for caret */
.dropdown-toggle .caret {
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
}

Answer 4

我来到这里寻找类似问题的解决方案，尽管在我的情况下，下拉列表不在col div中。我希望下拉按钮与下拉列表的宽度相匹配，具体取决于更宽的内容宽度，类似于选择下拉列表。如果有人在这里寻找类似的解决方案，那就是：

    public function laptops()
    {
    $this->load->model('feature_model');
    $filter = array(
        'price' => $this->input->get('price'),
        'name' =>$this->input->get('name')
    );
    $data['laptop'] = $this->feature_model->laptops_m($filter);

    echo json_encode( $data['laptop'] );
   // $this->load->view('feature/checkbox',$data);
    }

在这个例子中，我希望下拉列表向右浮动，但它可以很容易地调整到适合您的工作。

在Bootstrap 3.0中设置下拉列表的宽度

4 个答案: