Spalten nicht richtig mit Bootstrap

Ich habe ein Design, das ich in Photoshop mit einem Bootstrap 12-Spalten-Handbuch verspottet habe. Immer wenn ich versuche, dies in Bootstrap nachzuahmen, sind die Ergebnisse NICHTS wie das, was ich will.Spalten nicht richtig mit Bootstrap

Mein HTML-Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
    body { 
    background-color: #cacaca; 

    } 
    .container{ 

    } 
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar { 
     margin-bottom: 0; 
     border: 0px solid black; 
     border-radius: 0; 
b  ackground-color: #2a2b2d; 
    } 

    .bottom-nav { 
     background-color: #1d1e20; 
     border: 0px solid black; 
     margin-top: 0; 
    } 
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */ 
    .row.content { 
     height: 100px 
    } 

    /* Set gray background color and 100% height */ 
    .sidenav { 
     padding-top: 20px; 
     background-color: #f1f1f1; 
     height: 100%; 
    } 

    /* Set black background color, white text and some padding */ 
    footer { 
     background-color: #555; 
     color: white; 
     padding: 15px; 
    } 
    .text-left{ 
     margin-top: 105px; 
     border:1px solid black; 
     background-color:white; 
     } 
    .blog{ 
     border:1px solid black; 
     background-color:white; 
     margin-right: 10px; 
} 
    .sidebar{ 
    margin-left: 10px; 
     border:1px solid black; 
     background-color:white; 
} 

    /* On small screens, set height to 'auto' for sidenav and grid */ 
    @media screen and (max-width: 767px) { 
     .sidenav { 
     height: 280; 
     width:280; 
     margin:20px; 

     } 
     .row.content {height:auto;} 
    } 
    </style> 
</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Logo</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 

     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<nav class="bottom-nav"> 
&nbsp; 
</nav> 
<div class="container text-center"> 
    <div class="row content"> 
    <div class="col-md-3 text-left">.col-md-3</div> 
    <div class="col-md-3 text-left">.col-md-3</div> 
    <div class="col-md-3 text-left">.col-md-3</div> 
    <div class="col-md-3"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-9 blog">.col-md-9</div> 
    <div class="col-md-3 sidebar">.col-md-3</div> 
    </div> 
</div> 

<footer class="container-fluid text-center"> 
    <p>Footer Text</p> 
</footer> 

</body> 
</html>

Mein Problem ist, dass in meinem Mockup, ich habe 10px von "Gosse" zwischen jeder Spalte, wenn ich dieses Add mit "margin" CSS in, es wirft die Seite aus dem Gleichgewicht.

Auch der Hauptblogblock (der große weiße) ist 9 Spalten. die Sidebar (schwarzes Ding daneben) besteht aus 3 Spalten. Immer wenn ich die entsprechenden Spalten WITH margin eingebe, schiebt es es auf eine neue Zeile. Wie so:

bin ich wirklich neu Bootstrap, aber es wirft mich für eine Schleife! Jede Hilfe wird geschätzt! Ich würde das wirklich gerne richtig lernen.

Gibt es auch eine Möglichkeit, die Spalten wie in meinem Modell zu zentrieren?

Quelle

2016-03-19 user1508174

zuerst: Entfernen Sie den Rand rechts und den Rand links von .blog und .Seitenleiste. dann: Sie können ein div innerhalb div.col-md-3 mit Breite: 100% und Hintergrundfarbe: weiß, und Hintergrundfarbe: weiß von div.sidebar entfernen.

.blog{ 
    border:1px solid black; 
    background-color:white; 
} 
.sidebar{ 
    border:1px solid black; 
} 
.with-space { 
    width: 100%; 
    background-color:white; 
} 
/*-------------------*/ 
<div class="row"> 
<div class="col-md-9 blog">col-md-9</div> 
<div class="col-md-3 sidebar"> 
    <div class="with-space">col-md-3</div> 
</div>

Ich hoffe, es hilft Ihnen, ...

Quelle

2016-03-19 05:51:28 dnviveros

Bootstrap Grid hat eine Standard-Rinne von 30px (15px links und 15px rechts für jeden .col- *) – dnviveros

Es half sehr, danke! – user1508174

Haben Sie versucht, den Container div nach der ersten Reihe zu schließen, und einen zweiten Behälter für die zweite Reihe zu öffnen? Bootstrap macht eine Wrap-around-Sache, wenn Sie 12 Spalten in einem Container überschreiten

Quelle

2016-03-19 22:18:17

Spalten nicht richtig mit Bootstrap

Antwort

Verwandte Themen