html - Navbar-brand 偏离中心且尺寸不正确

Question

这似乎是一个 common problem .我没有任何自定义 css，现在我没有使用 collapse(也许这是我的问题？)，我该如何修复我的 html 以便 bootstrap 的品牌布局正确？同时保留我正确的 float /环绕登录表单。

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="">RPF</a>
                </div>
                <div class="navbar-right container-fluid">
                    <form show.bind="!isAuthenticated()" class="navbar-form">
                        <div class="form-group">
                            <input name="username" type="text" class="form-control" placeholder="username">
                            <input name="password" type="password" class="form-control" placeholder="password">
                        </div>
                        <button name="login" type="button" class="btn btn-default navbar-btn">Sign In</button>
                        <button name="register" type="button" class="btn btn-default navbar-btn">Register</button>
                    </form>
                    <form show.bind="isAuthenticated()" class="navbar-form">
                        <button name="logout" type="button" class="btn btn-default navbar-btn">Sign Out</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    <div class="row container">
        <nav class="col-xs-3 col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#">Manage Content</a></li>
            </ul>
        </nav>

        <main id="content" class="container-fluid">
            <router-view></router-view>
        </main>
    </div>
</template>

p.s Aurelia 不是特别相关，但这就是额外语法的来源。

Answer 1

这主要是由于使用了 navbar-btn navbar-form 里面的类:见Docs

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

你也不应该需要这个 div <div class="navbar-right container-fluid">在你的表格周围，使用 <form class="navbar-form navbar-right">以及避免结合 container与 row s 在一个 div 中:<div class="row container">或嵌套容器。参见 Grid

工作示例:以整页打开

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">

      <div class="navbar-header">
        <a class="navbar-brand" href="#">RPF</a>
      </div>

      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input name="username" type="text" class="form-control" placeholder="username">
          <input name="password" type="password" class="form-control" placeholder="password">
        </div>
        <button name="login" type="button" class="btn btn-default">Sign In</button>
        <button name="register" type="button" class="btn btn-default">Register</button>
      </form>
      <!-- <form show.bind="isAuthenticated()" class="navbar-form navbar-right">
        <button name="logout" type="button" class="btn btn-default">Sign Out</button>
      </form>-->

    </div>
  </nav>
</header>

<div class="container">

  <div class="row">
    <div class="col-xs-3 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Manage Content</a>
        </li>
      </ul>
    </div>
  </div>

  <main id="content">
    <router-view>VIEW</router-view>
  </main>

</div>