Question

我正在使用bootstrap 3来创建一个简单的下拉菜单，但我想减小它的宽度，我无法弄清楚如何做到这一点。

HTML：

<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">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another</a></li>
    <li><a href="#">Something</a></li>
    <li><a href="#">Separated</a></li>
  </ul>
</div>

CSS：

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

Answer 1

.dropdown-menu有min-width: 160px;和min-width覆盖width，因此您无法更改width您可以使用min-width代替width }。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<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">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another</a>
    </li>
    <li><a href="#">Something</a>
    </li>
    <li><a href="#">Separated</a>
    </li>
  </ul>
</div>

有效。您应该致电bootstrap lib和jquery。请阅读bootstrap documentation。

Jsfiddle

Answer 2

为 div 提供ID，并在 css 中指定 min-width ，如下所示：

.dropdown #mydiv{ min-width:60px; }

注意：请勿使用＆＃39;！important＆＃39;。有关更多信息，请查看Chris Coyier撰写的这篇精彩文章：Specifics on CSS Specificity

如何减少下拉菜单的宽度？

2 个答案: