当使用Bootstrap( 此处jsbin )创建导航栏并重新定义为较小的浏览器宽度时 ,菜单将像这样包装:

在此处输入图片说明

我们如何使菜单不换行并停留在一行中? (按钮/搜索字段应位于品牌上方,品牌可能会被屏蔽)


这是导航栏的代码:

 <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div>
       <ul class="nav navbar-nav navbar-right">
        <li class="navbar-form">
            <div class="form-group">
              <div class="input-group input-group-sm">
                    <input class="form-control" placeholder="Search" type="text">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                    </span>
              </div>
            </div></li>
          <li><a type="button" class="btn btn-default btn-sm" href="http://gget.it/ornlbhjq/edit.php" id="newpost">New post</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown" role="button" aria-expanded="false" id="dropdown">Login / Signup&nbsp;<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

#1楼 票数:0

因为.navigation的列表项具有display:block; 威奇会自动消耗掉他们可以占用的所有空间。

所以改变

.nav>li {
  position: relative;
  display: block;
}

.nav>li {
  position: relative;
  display: inline-block;
}

  ask by Basj translate from so

未解决问题?本站智能推荐:

1回复

Bootstrap导航栏品牌在导航栏菜单下方跳转

我有一个引导navbar品牌的引导程序,当调整窗口大小(较小)时,该引导程序跳转到下面(向下移动)并尊重其原始位置。 这是因为在调整窗口大小时,右侧的导航栏菜单(三个水平条)会与navbar品牌一起折叠。.navbar品牌内的徽标为svg格式。如何调整navbar品牌,以便它不会跳到下面吗?
1回复

如何调试引导无效的导航栏菜单

我为我的网站开发课程制作了一个主页,显然当我尝试单击导航菜单的链接时,它将无法正常工作。 我真的不知道怎么了,所以我希望你能帮我这个忙。 这是我的代码: 这是导航栏的CSS代码: 有人可以帮我吗?
1回复

导航栏菜单折叠未打开

我的目标是编写带有几个菜单链接的网站导航栏。 在小型设备上,应出现一个菜单栏,单击该菜单栏可使菜单链接折叠。 我遵循了YouTube教程来学习如何执行此操作,并且已经将我的代码与该教程中的代码进行了数次比较,但是不知何故,我的菜单不想折叠。 我可以确定问题不在于引导程序已加载,因为当我
2回复

如何增加导航栏下拉菜单的宽度?

我正在使用引导程序,并试图将搜索表单放在导航栏下拉菜单中,但是我发现该表单看起来被压缩了,因为下拉菜单的宽度太小了。 另外,表单元素不是我想要的。 我该如何解决? 我是CSS和Web设计的新手。 请帮忙! 当前布局: 我想要达到的目标:
1回复

引导导航栏如何删除菜单按钮并添加菜单按钮?

在这样的导航栏中: http://getbootstrap.com/examples/navbar/ 当窗口变得足够小时,菜单项消失,并出现3行按钮。 我想知道发生这种情况时会发生什么变化。 我特别想知道将哪些类添加到了什么中。 我的代码如下,其行为类似于上面的链接。 我使用了i
1回复

调整大小时,防止Bootstrap导航栏跳下

这是我的标记的链接,它与Bootstrap的相关性为100%: <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet"/> <nav
1回复

如何防止Bootstrap导航栏在折叠时分成几行

我一整天都在寻找它,但找不到解决方案,所以我希望在 2 分钟内有人会发布确切问题的回答链接时,我不会看起来像个白痴。 我正在尝试创建一个类似于steamdb的导航栏,其中搜索框在导航栏折叠后保留并且只是缩小了尺寸。 但是我遇到了一个问题,如果我将导航栏设置为<nav class="navbar
1回复

防止在iPhone上的导航栏品牌中拉伸徽标

我有一个带有徽标和按钮的navbar-brand ,并且在折叠菜单时在iPhone上观看时它们会拉长。 我该如何预防?