首页 文章

Bootstrap 3下拉菜单中心对齐不起作用

提问于
浏览 次
23

我无法将下拉列表与悬停下拉列表的父级中心对齐 . 我试过text-align：center为整个.nav .navbar li元素，但它不起作用 . 我试图设置保证金和左：50％的整个ul.dropdown菜单是下拉列表，但它不起作用 . 这是html代码：

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
  <li><div class="btn-toolbar">
    <div class="btn-group">
      <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Made in the USA</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Human Grade</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">USDA Meats</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Our Story</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Campare</a></li>
      </ul>
    </div>
  </li>
</ul>

我应该在哪个类下拉菜单或nav navbar-nav中进行对齐，我应该设置什么？

html css twitter-bootstrap drop-down-menu bootstrap-4

3 回答

  • 75

    唯一，丑陋的方式是根据您的需要设置位置，如：

    .dropdown-menu{
    right: -25px !important;
}

    Fiddle

    但不是应该使用它的方式 . 请记住，您必须调整所有媒体设备的设置 .

    回复于
  • 5

    您可以使用transform来避免使用固定宽度：

    .dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
}

    受http://css-tricks.com/centering-percentage-widthheight-elements/影响的答案

    回复于
  • 1

    你可以这样做，只要你愿意给下拉ul一个固定的宽度 . 见下面的代码：

    .dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}

    前2个声明用于可视化目的，但重要的部分是第3行 . 您需要定义宽度（在本例中为200px），然后 margin-left 等于宽度的一半 . 这将适用于任何宽度，无论按钮位于右侧，左侧还是位于元素之间（当然，您可能需要一些空间用于 button 元素）

    你可以see a fiddle here

    回复于

相关问题