html - Twitter Bootstrap 3.3.5 navbar 下拉右拉

标签 html css twitter-bootstrap-3

我试图让下拉菜单转到最右边,在搜索输入和提交按钮之后,尝试了 pull-right,navbar-right 但无济于事。

有什么办法可以实现吗?

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav pull-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Google</a></li>              
        </ul>
      </li>
    </ul>

  </div><!--/.nav-collapse -->
</div>

enter image description here

我正在尝试这个: enter image description here

最佳答案

真的不确定,但是如果您将登录部分 ul 更改为:

 <ul class="nav navbar-nav pull-right">

到:

<ul class="nav navbar-right pull-right">

关于html - Twitter Bootstrap 3.3.5 navbar 下拉右拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31706619/

相关文章:

javascript - 如何使用javascript停止拖放中的div重叠

javascript - 快速连续隐藏和显示图像时的视觉延迟

javascript - 嵌套 UL 高度

javascript - 如果禁用了 Javascript,则删除 <div>

html - 如何在不使用 span 的情况下将样式应用于内联元素

javascript - 选项卡上的 Bootstrap 3 数据目标属性不起作用

javascript - Bootstrap 响应式嵌入 + Vimeo = 内容安全策略错误

html - 两个静态大小的列之间的动态大小的 iframe(3 列布局)

边框内的 HTML CSS 颜色

html - Bootstrap : How to correctly centre a 6 column DIV inside of a fluid container