Question

我有这段代码：

<button type="button" class="btn btn-success open">      
    <i class="icon-comment"></i>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        About the Library                                         
    </a>                                        
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" tabindex="-1" role="menuitem">Library Hours</a></li>
        <li><a href="#" role="menuitem">Board of Visitors</a></li>
        <li><a href="#" role="menuitem">Department and Staff</a></li>                    
        <li><a href="#" role="menuitem">Direction Maps</a></li>                    
        <li><a href="#" role="menuitem">Equipment</a></li>
        <li><a href="#" role="menuitem">Floor Plans</a></li>
        <li><a href="#" role="menuitem">Information and Policies</a></li>
        <li><a href="#" role="menuitem">Mission and Vision</a></li>
    </ul>    
</button>

这是我唯一的CSS代码：

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a
{
    background-image: none;
    background-color: #0C6A13;
}

这就是它的样子：

enter image description here

我有一个带标签的按钮＆＃34;关于图书馆＆＃34;作为我的数据切换。当我单击我的数据切换时，菜单始终显示在左侧。我希望它显示在中心。我该怎么办？非常感谢任何帮助。

Answer 1

这是一种方法，但您需要指定宽度：

Bootply ：http://www.bootply.com/79wWifpDzR

<强>的CSS ：

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a
{
    background-image: none;
    background-color: #0C6A13;
}

.dropdown-menu{
 left:0 !important;
 right:0 !important;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 200px;    
  }

<强> HTML ：

<button type="button" class="btn btn-success open dropdown">      
    <i class="icon-comment"></i>
    <a class="dropdown-toggle" data-toggle="dropdown">
        About the Library                                         
    </a>                                        
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" tabindex="-1" role="menuitem">Library Hours</a></li>
        <li><a href="#" role="menuitem">Board of Visitors</a></li>
        <li><a href="#" role="menuitem">Department and Staff</a></li>                    
        <li><a href="#" role="menuitem">Direction Maps</a></li>                    
        <li><a href="#" role="menuitem">Equipment</a></li>
        <li><a href="#" role="menuitem">Floor Plans</a></li>
        <li><a href="#" role="menuitem">Information and Policies</a></li>
        <li><a href="#" role="menuitem">Mission and Vision</a></li>
    </ul>    
</button>

Answer 2

尝试使用css，

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a
{
background-image: none;
background-color: #0C6A13;
margin-left:auto;
margin-right:auto;
width:250px;

}

否则使用例如auto;

的值替换margin-left:50px;

让我知道它是怎么回事:)）

在数据切换的中心显示菜单

2 个答案: