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

Posted 2023-03-05

【中文标题】在 Bootstrap 3.0 中设置下拉列表的宽度

【英文标题】：Setting the width of a dropdown list in Bootstrap 3.0

【发布时间】：2013-09-06 14:35:46

【问题描述】：

如何将 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-* 宽度。

【参考方案1】：

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

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

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

【讨论】：

我想要按钮宽度 = 下拉列表宽度 = col-* 宽度，抱歉问题不清楚。

你的演示和上面的代码有区别...不确定是否有区别。

@graphmeter CSS 类如col-*-* 用于网格布局，根据引导提示，应在row 或form-group 之后使用：bootlint.com跨度>

【参考方案2】：

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

.dropdown-menu 
  width: 100%; 


.btn
 width: 100%;

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

【参考方案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);

【讨论】：

这项技术救了我的培根本，谢谢！我还在 .dropdown-toggle for firefox 的第一个 中添加了 -moz-box-sizing: border-box

【参考方案4】：

我来这里是为了寻找类似问题的解决方案，尽管在我的情况下，下拉菜单不在 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>

在本例中，我希望下拉菜单浮动到右侧，但您可以轻松调整它以使其工作。