Navbar-бренд находится вне центра и имеет неправильный размер

Question

Это, кажется, commonproblem. У меня нет каких-либо пользовательских css, и сейчас я не использую сбой (может быть, это моя проблема?), Как я могу исправить свой html, чтобы загрузочная марка правильно маркировалась? сохраняя мою правую плавающую/упаковочную форму для входа.

<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 Аурелий не особенно актуален, но это то, что дополнительный синтаксис с.

Answer 1

Это в первую очередь за счет использования navbar-btn класса внутри navbar-form: см Docs

Добавить .navbar-btn класс в <button> элементы, не проживающих в <form> к вертикально центрируйте их на панели навигации.

Вы также не должны это Диво <div class="navbar-right container-fluid"> вокруг вашей формы, используйте <form class="navbar-form navbar-right">, а также избегать сочетаний container с с row с в одном 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>

Answer 2

, как вы включили

RPF 

в NavBar-заголовка, так что будет только с левой стороны. вы должны добавить css и сделать это важным! Важным. так что ваши изменения будут рассматриваться браузером