Question

我遇到的问题是将基于Bootstrap的navbar的所有3个组件保留在一个水平行中。此导航栏具有流体宽度。

问题：我们如何调整代码以获取所有3个项目（从左到右：a，form和ul）排成一列？ form应该在橙色a和登录/注册ul之间留出100％的剩余空间。

Bootply： http://www.bootply.com/oEkHN0DVmE

目前

所需

HTML

<nav class="navbar navbar-default navbar-fixed-top">

    <a class="brand" href="#">
        <img src="/img/logo-white.png">
    </a>

    <form role="form" class="form-horizontal search-form">        
        <!-- <i class="fa fa-search"></i> -->
        <input type="text" class="form-control" placeholder="Search">
    </form>

    <ul class="nav navbar-nav pull-right">
        <li><a href="/users/sign_in">Login</a></li>
        <li><a href="/users/sign_up">Sign up</a></li>
    </ul>

</nav>

CSS

.brand {
    width: 170px;
    height: 80px;
    background-color: #fc4310;
    display: inline-block
}

.search-form {
    width: 100%;
    height: 30px;
    display: inline-block;
}

Answer 1

非常简单：

nav { display: flex; }

将所有nav子元素排列在一行中。

要区分行上的元素，请参阅此处的选项：Methods for Aligning Flex Items

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 2

对您的代码进行了一些更改......

我希望这会对你有帮助..

参考 demo

添加了导航标题

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <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="#"><img src="//placehold.it/100x50"></a>
    </div>

并使用css

更改表单

<form class="navbar-form">
        <div class="form-group" style="display:inline;">
          <div class="fill">
            <input type="text" class="form-control" placeholder="Search"><span class="btn"></span>
          </div>
        </div>

.fill {
  position: relative;
  display: table;
  border-collapse: separate;
}

.fill .form-control {
  width: 100%;
  margin-bottom: 0;
  display: inline-block;
}


.fill .btn {
  white-space:nowrap;
  width:1%;
  display: table-cell;
}

.navbar-brand{
    padding:0;
    margin-right:15px;
  }

Answer 3

使用网格系统：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="col-lg-2">
    <a class="brand" href="#">
        <img src="/img/logo-white.png">
    </a>
  </div>
  <div class="col-lg-8">
    <form role="form" class="form-horizontal search-form">        
        <!-- <i class="fa fa-search"></i> -->
        <input type="text" class="form-control" placeholder="Search">
    </form>
    </div>
<div class="col-lg-2">
    <ul class="nav navbar-nav pull-right">
        <li><a href="/users/sign_in">Login</a></li>
        <li><a href="/users/sign_up">Sign up</a></li>
    </ul>
  </div>
</nav>

http://www.bootply.com/rV9ZF8sO7N

Answer 4

更改一些css

  .search-form {
      width: 83%;
      height: 30px;
      display: inline-block;
  }
 .search-form input{margin-top:35px}
 .nav.navbar-nav{margin-top:25px;}

http://www.bootply.com/YFnjNIZ7Wo

在Twitter Bootstrap Navbar中对齐一个水平行中的所有元素

4 个答案: