Wie kann ich Inhalt rechts von meinem Bootstrap nav setzen

So habe ich gerade erst begonnen, Bootstrap zu verwenden, und ich habe Navigationsschaltflächen erstellt. Aber aus irgendeinem Grund kann ich keinen Inhalt rechts von den Tasten setzen. Ich hätte gerne einen Bereich für Inhalte rechts neben den Schaltflächen mit schwarzem Hintergrund.Wie kann ich Inhalt rechts von meinem Bootstrap nav setzen

body{ 
 
    overflow: hidden; 
 
    background-color: #1C213D; 
 
} 
 

 
ul li{ 
 
    position: relative; 
 
    text-align: center; 
 
    list-style: none; 
 
    display: block; 
 
    color: lightsteelblue; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    margin-top: 200px; 
 
} 
 

 
.nav{ 
 
    width: 200px; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-02-14 Anonymous

Suchen Sie die Klasse navbar-rechts? – jmag

Dies ist eine Fortsetzung auf die obige Frage. Wenn Sie möchten, dass ein Bottlstrap-Design reagiert, d. H. Wenn Sie möchten, dass es in allen Bildschirmgrößen gleich aussieht, sollten Sie diese Klassen zusammen verwenden. Auch ich habe col-lg-offset-1 Offset-Klassen verwendet, da es eine automatische Marge (Marge von 1 Spalte in diesem Fall) zwischen Ihren Elementen und dem Design wird gut aussehen wird.

body{ 
 
    overflow: hidden; 
 
    background-color: #1C213D; 
 
} 
 

 
ul li{ 
 
    position: relative; 
 
    text-align: center; 
 
    list-style: none; 
 
    display: block; 
 
    color: lightsteelblue; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    margin-top: 50px; 
 
} 
 

 
.nav{ 
 
    width: 200px; 
 
} 
 

 
.main{ 
 
    margin-top:50px; 
 
    }

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main"> 
 
      Main content goes here 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

hoffe, das hilft!

Quelle

2017-02-15 00:13:36 neophyte

können Sie COL- * Klassen von Bootstrap verwenden, weisen bestimmte Spalten zu Ihrem nav und bestimmte Spaltenbreite auf Ihre Hauptinhalt Breite.

Überprüfen Sie das Ergebnis im erweiterten Fenster.

body{ 
 
    overflow: hidden; 
 
    background-color: #1C213D; 
 
} 
 

 
ul li{ 
 
    position: relative; 
 
    text-align: center; 
 
    list-style: none; 
 
    display: block; 
 
    color: lightsteelblue; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    margin-top: 50px; 
 
} 
 

 
.nav{ 
 
    width: 200px; 
 
} 
 

 
.main{ 
 
    margin-top:50px; 
 
    }

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-8 main"> 
 
      Main content goes here 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-02-14 19:06:13 WitVault

Das hat funktioniert, aber wenn ich die Größe des Fensters ändere, geht der Text direkt nach unten links auf der Seite. –

Nun, das ist richtiges Verhalten. Verwenden Sie col-xs-4 und col-xs-8 anstelle von col-md-4 und col-md-8 – WitVault

Wie kann ich Inhalt rechts von meinem Bootstrap nav setzen

Antwort

Verwandte Themen