如何使下拉菜单在Bootstrap 3中向右扩展

debugcn 发表于 Dev

杰里米·拜伦（Jeremy Byron）

我在下面使用此代码和CSS。如您所见，下拉子菜单向左扩展，这是我将光标悬停在“更多选项”上的时候。我已经更改了CSS上的每个“ left”关键字，但它不会向右移动。如何在右侧扩展下拉子菜单，这意味着如果我将鼠标悬停在“更多选项”上，它将像这样向右扩展？点击这里

<div class="container-fluid">
  <div class="btn-group pull-right">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
    </a>
      <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu dropdown-menu-right">
        <a tabindex="-1" href="#">More options</a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li class="dropdown-submenu">
            <a href="#">More..</a>
              <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
              </ul>
            </li>
            <li><a href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
         </ul>
       </li>
       <li><a href="#">Something else here</a></li>
     </ul>
   </div>
 </div>

这是我的CSS；

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:-95%;max-width:180px;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-menu-right {margin-left:0;}

迪克西特

我刚刚从btn-group中删除了pull-right类

<div class="container-fluid">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Menu
  <span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li class="dropdown-submenu dropdown-menu-right">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>
      <li class="dropdown-submenu">
        <a href="#">More..</a>
        <ul class="dropdown-menu">
            <li><a href="#">3rd level</a></li>
            <li><a href="#">3rd level</a></li>
        </ul>
      </li>
      <li><a href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
    </ul>
  </li>
    <li><a href="#">Something else here</a></li>
</ul>

并添加此CSS。

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left: 100%;max-width:180px;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display: inherit;/* right: inherit; */}
.dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-menu-right {margin-left:0;}

.dropdown-menu-right {
    right:inherit !important;
    left: auto;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。