Question

我正在尝试在Bootstrap中更改drowpdown菜单的宽度。请指导我应该在哪里插入自定义CSS来更改/减小下拉菜单的宽度。

   <body>
    <div class="container-fluid">



        <div class="dropdown">

            <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">MENU <span class="caret"></span></button>

            <ul class="dropdown-menu">

              <li class="dropdown-header">HEADER-1</li>
              <li>ITEM-1</li>
              <li>ITEM-1</li>
              <li>ITEM-1</li>
              <li class="divider"></li>
              <li class="dropdown-header">HEADER-2</li>
              <li>ITEM-1</li>
              <li>ITEM-1</li>




            </ul>

        </div>


      </div>





    </div>


  </body>
</html>

Answer 1

Bootstrap的下拉菜单具有最小宽度。更改下拉菜单的min-width，以减小其宽度。

.dropdown-menu {
    min-width: 125px;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .dropdown-menu {
    min-width: 125px;
  }
</style>
<div class="container-fluid">
  <div class="dropdown">
    <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">MENU <span class="caret"></span></button>

    <ul class="dropdown-menu">
      <li class="dropdown-header">HEADER-1</li>
      <li>ITEM-1</li>
      <li>ITEM-1</li>
      <li>ITEM-1</li>
      <li class="divider"></li>
      <li class="dropdown-header">HEADER-2</li>
      <li>ITEM-1</li>
      <li>ITEM-1</li>
    </ul>
  </div>
</div>

Answer 2

在标签<li>中添加自定义类，例如

.dropdown-custom > .dropdown-menu {
    min-width:220px;
    padding:15px;
    color:red;
}

try my fiddle

引导程序更改市区菜单的宽度

2 个答案: