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

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;
}

- Valip

Answer 1

.dropdown-menu的min-width属性设置为160像素；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文档。

Jsfiddle

- Alex

---

@PavelValeriu 让我来检查一下。 - Alex

@Pavel Valeriu 使用 min-width:60px - Alex

@PavelValeriu 太棒了。祝你好运。 - Alex

Answer 2

给

标签一个ID，并在CSS中指定min-width，如下所示：

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

注意：不要使用'!important'。

欲了解更多信息，请查看Chris Coyier的这篇优秀文章：CSS特异性的具体细节

- Nuhman