Navbar品牌是偏离中心和大小不正确

这似乎是一个common problem。我没有任何自定义CSS，现在我没有使用崩溃（也许这是我的问题？），我怎样才能修复我的HTML，使引导品牌奠定了正确的？同时保留我的权利浮动/包装登录表单。Navbar品牌是偏离中心和大小不正确

<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酒店不是特别相关，但是这是额外的语法是什么。

来源

2016-07-31 xenoterracide

这主要是由于navbar-form内使用navbar-btn类：见Docs

添加不居住在 <form>到.navbar-btn类<button>元素垂直居中在导航栏中。

你也应该不需要这个div在表单<div class="navbar-right container-fluid">，使用<form class="navbar-form navbar-right">以及避免与row S IN单DIV组合container S：<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>

来源

2016-07-31 19:41:40 vanburen

与行我想要做的是有一个完整的长度左侧导航，内容就在它的右侧。我可能会允许导航自动隐藏在类似于材料设计的某个点（如谷歌收件箱）。也许有更好的方法来做到这一点。尽管如此，我还是可以解决这个问题。 – xenoterracide

林不知道我明白为什么结合行和容器到一个div是必要的。无论哪种方式希望这解决了你的主要问题。 – vanburen

它可能不是，也许我误解你说的行和容器，但是是解决我的主要问题 – xenoterracide

如您在导航栏头包括

RPF

所以这将是只从左侧。你必须添加CSS，并使其重要！重要的。让您的更改将通过浏览器被认为是

来源

2016-07-31 19:10:23

吧？左/右的东西现在正在工作。问题在于RPF不在导航栏中居中，并且查看了我会说的字体比它应该小的例子。我的意思是我可以使用CSS来解决这个问题，但这似乎是错误的 – xenoterracide

您正在使用窗体控件类，默认情况下离开顶部6像素。你可以添加6像素填充到RDF –

Navbar品牌是偏离中心和大小不正确

回答

相关问题