将下拉按钮和下拉菜单放在中心位置? [英] position dropdown button and dropdown menu in center?
本文介绍了将下拉按钮和下拉菜单放在中心位置?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">关于我<span class="插入符号"></span></button><ul class="下拉菜单"><li class="dropdown-header">下拉内容</li><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li role="separator" class="divider"></li><li><a href="#">分隔链接</a></li>在 div 和按钮中添加了 center-block，但无法让下拉菜单位于中心.
在此页面的下拉位置"中可以找到类似的内容.按钮左对齐，但菜单右对齐.我可以将菜单右对齐但不能居中.
请帮忙！
解决方案
添加一些css规则的小技巧，text-center with dropdown class and dropdown-menu-center 到列表.
来源:https://stackoverflow.com/a/28078054/6142097
.dropdown-menu-center {左:50%！重要；右:自动！重要；文本对齐:居中！重要；转换:翻译(-50％，0)！重要；}<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><div class="容器"><h2>下拉菜单</h2><div class="下拉文本中心"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下拉示例<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-center"><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">JavaScript</a></li><li class="divider"></li><li><a href="#">关于我们</a></li><div class="dropup center-block">
<button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropup stuff</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
added center-block to both div and button, but unable to get the dropup menu positioned center.
A similar thing can be found at "Dropdown Position" in this page. The button is aligned left, but the menu is right. I'm able to align the menu right but not center.
Please help!
解决方案
A little trick add some css rules,text-center with dropdown class and dropdown-menu-center to the list.
source: https://stackoverflow.com/a/28078054/6142097
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="container">
<h2>Dropdowns</h2>
<div class="dropdown text-center">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-center">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
这篇关于将下拉按钮和下拉菜单放在中心位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
