Navbar-Marke ist aus der Mitte und nicht richtig dimensioniert

Question

Dies scheint ein commonproblem zu sein. Ich habe keine benutzerdefinierten CSS, und im Moment verwende ich nicht Kollaps (vielleicht ist das mein Problem?), Wie kann ich meinen HTML reparieren, so dass Bootstrap die Marke richtig angelegt hat? unter Beibehaltung meiner rechten Floating/Wrapping-Login-Formular.

<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 ist nicht besonders relevant, aber das ist, was die zusätzliche Syntax aus ist.

Answer 1

Es handelt sich hierbei in erster Linie durch den Einsatz der navbar-btn Klasse innerhalb eines navbar-form: siehe Docs

die .navbar-btn Klasse <button> Elemente hinzufügen nicht in einem <form> mit Wohnsitz zentrieren Sie sie vertikal in der Navigationsleiste.

Sie sollten auch nicht brauchen diese <div class="navbar-right container-fluid"> um Ihre Form div verwenden <form class="navbar-form navbar-right"> sowie vermeiden container s mit row s in einem einzigen div Kombination: <div class="row container"> oder Verschachtelung Containern. Siehe Grid

Arbeitsbeispiel:Open im Fullpage

<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

wie Sie enthalten

RPF 

in navbar-Header, so dass es nur von der linken Seite sein wird. du musst css hinzufügen und es wichtig machen! so dass die Änderungen durch Browser betrachtet werden