Bootstrap 水平下拉菜单? [英] Bootstrap horizontal dropdown-menu?
本文介绍了Bootstrap 水平下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个水平链接的引导下拉菜单.不幸的是,我无法正确设置宽度.我似乎可以实现的唯一方法是将最小宽度设置为某个任意数字.我想以响应方式执行此操作.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');.dropdown-menu>li>a {显示:内联;}.下拉式菜单 {最小宽度: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">算了吧按钮><ul class="dropdown-menu" role="menu"><li><a href="http://google.com">Google</a><a href="http://facebook.com">Facebook</a>
解决方案
你的问题解决了 Horizontal List
html
<小时> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">放下</button><ul class="dropdown-menu" role="menu"><li><a href="http://google.com">Google</a><li><a href="http://facebook.com">Facebook</a>
css
<小时> @import url('http://getbootstrap.com/dist/css/bootstrap.css');.下拉菜单>李{显示:内联块;向左飘浮;}.open >ul{显示:inline-flex !important;}
I'd like a bootstrap dropdown menu where the links are horizontal. Unfortunately, I'm having trouble with getting the width correct. The only way I can seem to make it happen is set the min-width to some arbitrary number. I'd like to do this responsively.
@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>
解决方案
Your Problem solved Horizontal List
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;
}
这篇关于Bootstrap 水平下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文