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

Setting the width of a dropdown list in Bootstrap 3.0

本文关键字：下拉列表 设置 Bootstrap      更新时间：2023-09-26

如何在bootstrap 3.0中将下拉触发按钮的宽度设置为等于下拉列表的宽度？类似于使用引导程序选择时实现的效果(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-*width。

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

.dropdown-menu {
  width: 100%; 
}
.btn{
 width: 100%;
}

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

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

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

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

您可以设置.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);
}

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

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

在这个例子中，我希望下拉列表向右浮动，但它可以很容易地进行调整，以使其按您的意愿工作。

相关文章：