[英]Bootstrap horizontal dropdown-menu?
我想要一个引导下拉菜单,其中链接是水平的。 不幸的是,我在确保宽度正确方面遇到了麻烦。 我似乎能够实现它的唯一方法是将最小宽度设置为某个任意数字。 我想要回应地这样做。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .dropdown-menu>li>a { display: inline; } .dropdown-menu { min-width: 500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Drop it </button> <ul class="dropdown-menu" role="menu"> <li> <a href="http://google.com">Google</a> <a href="http://facebook.com">Facebook</a> </li> </ul> </div>
你的问题解决了水平列表
HTML
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Drop it</button>
<ul class="dropdown-menu" role="menu">
<li> <a href="http://google.com">Google</a>
</li>
<li> <a href="http://facebook.com">Facebook</a>
</li>
</ul>
</div>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu > li {
display: inline-block;
float:left;
}
.open > ul {
display: inline-flex !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.