这似乎是一个 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 不是特别相关,但这就是额外语法的来源。
最佳答案
这主要是由于使用了 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>
关于html - Navbar-brand 偏离中心且尺寸不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38687409/