Question

我正在尝试移动页面右侧汉堡栏旁边的内联菜单。我正在使用bootsrtap，下面的图片是我想要菜单出现的方式，是否可能？因此，当用户点击汉堡栏时，菜单会出现在汉堡栏旁边的左侧。此刻它下降到菜单栏下方。这是bootsnip http://bootsnipp.com/user/snippets/M3gdX示例。

以下是我的代码（HTML）：

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="header-image">Logo</a>         
</div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <div class="menu-bar"></div>
            <div class="menu-bar"></div>
            <div class="menu-bar"></div>
          </a>
          <ul class="dropdown-menu" id="number-list">
          <ul class="list-inline">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="about.html">About</a></li>                             
        <li><a href="contact.html">Contact</a></li>
        </ul>
    </ul>
    </li>
    </ul>
    </div>
</nav>

CSS代码：

.menu-bar {
width: 22px;
height: 2px;
background-color: white;
margin: 6px ;
border-radius: 1px;
}
#number-list.dropdown-menu {
width: 300px;
}
.dropdwon-toggle {
 margin-right: 10px;
}

我是新手，似乎无法找到一个左下方菜单的示例，它不会滑出页面或翻页。

Answer 1

您可以将float：left设置为li元素，使其在一行中水平。

<ul class="list-inline lefties">

    <li class="active lefties-item">
        <a href="index.html">Home</a>
    </li>

    <li class="lefties-item">
        <a href="blog.html">Blog</a>
    </li>

    <li class="lefties-item">
        <a href="gallery.html">Gallery</a>
    </li>

    <li class="lefties-item">
        <a href="about.html">About</a>
    </li>       

    <li class="lefties-item">
        <a href="contact.html">Contact</a>
    </li>
</ul>

<强> CSS

  ul.lefties:after {
      clear: both;
      display: block;
      content: "";
  }

 .lefties-item {
     float: left;
 }

如何移动Burger Bar旁边的内联菜单列表（菜单栏）右侧

1 个答案: