Bootstrap水平下拉菜单? [英] Bootstrap horizontal dropdown-menu?

查看:270
本文介绍了Bootstrap水平下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要一个引导下拉菜单,其中链接是水平的。很抱歉,我无法获取正确的宽度。我唯一的方法,我似乎使它发生的设置min-width一些任意数字。我想做出响应。

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.

有任何建议吗?谢谢。 http://jsfiddle.net/3CwzH/

Any suggestions? Thanks. http://jsfiddle.net/3CwzH/

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>
      <a href="http://facebook.com">Facebook</a>
    </li>
  </ul>
</div>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu > li > a {
  display: inline;
 }

.dropdown-menu {
  min-width: 500px;
}


推荐答案

=http://jsfiddle.net/3CwzH/2/>水平列表

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆