38

如何将 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>

因此，我想：按钮宽度 = 下拉菜单列表 = col-* 宽度。

4

4 回答 4

39

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

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

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

于 2013-09-03T12:16:30.267 回答
30

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

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

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

于 2013-09-03T11:45:18.527 回答
9

当下拉菜单变得太小时，您可以设置.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);
}
于 2014-12-17T11:19:00.670 回答
0

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

.dropdown-container {
  float:right;
  height:60px;
}
.position-dropdown-controller {
  position: absolute;
  right:0;
}

.dropdown-toggle,
.dropdown-menu {
  width: 100%;
  min-width: 0;
}

.dropdown-toggle {
  text-align: right;
}

.dropdown-menu {
  height: 0;
  text-align: center;
  display: block !important;
  visibility: hidden;
  position: relative;
  float: none;
}

.open .dropdown-menu {
  display: block !important;
  visibility: visible;
  height: auto;
}

<div class="dropdown-container">
  <div class="position-dropdown-controller">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        ...
      </ul>
    </div>
  </div>
</div>

在这个例子中，我希望下拉菜单浮动到右边，但它可以很容易地调整为你喜欢的任何工作。

于 2016-05-04T06:51:11.200 回答