Bootstrap reaktions Gitter mit rechten fixierten Seitenleiste

Ich mag würde eine Vorlage mit Bootstrap so erzeugen, die das Raster des responsiven Systems einhalten:Bootstrap reaktions Gitter mit rechten fixierten Seitenleiste

Im Bild der Navigationsleiste und der rechten Seite (die enthält die zwei Tasten) sind klebrig (immer in der Ansicht)

Mein Problem ist die rechte Seite, da im Bootstrap-Grid-System der rechte Seitenblock als eine einzelne Zeile betrachtet wird, während der Hauptinhalt eine Vielfachzeile enthält. Wie kann ich das machen?

Quelle

2016-09-21 Pierre Dommerc

Haben Sie die Sidebar wollen Teil der 12 Spalten (1 oder 2 Spalten breit) oder sollten die 12 Spalten so breit sein wie der Hauptinhalt (es ist Teil des Gitters ist oder nicht)? _ "der rechte Seitenblock würde als eine einzelne Reihe betrachtet werden" _: wie? Meinst du eine einzelne Spalte? – FelipeAls

Ja Ich möchte, dass meine Sidebar Teil des Rasters ist (1 Spalte breit). –

Erstellen eine Hülle um die gesamten Bootstrap Gitter (container> row> cols ..), um die feste nav und rechte Seitenleiste enthalten.

<div class="wrapper"> 
     <!-- top nav --> 
     <nav> 
      ... 
     </nav> 

     <!-- main --> 
     <div class="left" id="main"> 
      <div class="container-fluid"> 
       <h1>Bootstrap Grid...</h1> 
      </div> 
     </div> 

     <!-- sidebar --> 
     <div class="right" id="sidebar"> 
      Fixed right sidebar 
     </div> 
</div>

http://www.codeply.com/go/37bttGte6c

Quelle

2016-09-21 14:33:50 ZimSystem

Ich wusste nicht, ob es für ein gutes reaktionsfähiges System gut ist, einen Wrapper um das Grid herum zu bauen, anstatt es im Grid zu erstellen. –

Es ist nichts falsch daran, das Gitter in einem äußeren Wrapper zu enthalten. Wichtig ist, dass das verschachtelte Grid 'container-fluid> row> cols' verwendet – ZimSystem

Sie könnten möglicherweise in ihre jeweiligen <div> Behälter trennen, zum Beispiel:

<body> 
    <div class="navbar navbar-default"> Navbar </div> 

    <div class="main-content col-md-10"> Main Content </div> 

    <div class="right-btn-group col-md-2"> Right buttons </div> 
</body>

diese Weise wird die rechte Seite von dem Hauptinhalt getrennt ist. Andererseits könnte ich die Frage falsch interpretieren.

Quelle

2016-09-21 12:24:40 zureka

Ja, aber mit dieser Methode ist die Breite der rechten Seite die Withd der Col-Klasse, und es ist nicht möglich, diese Breite richtig einzustellen? –

Wenn Sie benutzerdefinierte Formatierung der Spaltenbreite tun möchten, würde ich empfehlen, [diesen Link] (https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might) zu betrachten -nicht-wissen), insbesondere der Abschnitt "Benutzerdefinierte Behältergrößen". – zureka

Ok danke, werde ich. –

Sind Sie auf der Suche nach so etwas? Sie können die Breite des rechten Containers beliebig einstellen. Keine Notwendigkeit, bootstrap.css zu bearbeiten oder benutzerdefinierte Bootstrap-Klassen zu schreiben.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 
    body{ 
     width: 100%; 
     height: 100%; 
     color: #fff; 
    } 
    header, footer{ 
     height: 100px; 
    } 
    header{ 
     width: 100%; 
     background: #000; 
    } 
    .content-container{ 
     width: 100%; 
     position: relative; 
    } 
    .left-container{ 
     width: calc(100% - 90px); /* adjust */ 
     height: 100%; 
    } 
    .right-container{ 
     width: 90px; /* adjust */ 
     height: 100%; 
     position: absolute; 
     right: 0; 
     top: 0; 
     background: blue; 
    } 
    .main-content{ 
     height: 500px; 
     background: #ff0000; 
    } 
    footer{ 
     width: 100%; 
     background: #ed1899; 
    } 
    </style> 
</head> 
<body> 
<div class="container-fluid"> 
    <div class="row"> 

    <header class="nav">nav bar</header> 

    <div class="content-container"> 

     <div class="left-container"> 
     <div class="main-content"> 
      //main content 
     </div> 
     <footer> 
      //footer content 
     </footer> 
     </div> 

     <div class="right-container">buttons</div> 

    </div> 

    </div> 
</div> 
</body> 
</html>

Quelle

2016-09-21 13:21:56

Bootstrap reaktions Gitter mit rechten fixierten Seitenleiste

Antwort

Verwandte Themen