2017-06-23 5 views
0

, also wollte ich eine Sidebar, dann etwas Platz und die einen Inhaltsbereich erstellen. Für den Abstand zwischen Seitenleiste und Inhaltsbereich wollte ich die .offset-- -Eigenschaft von Bootstrap 3 verwenden. Aber irgendwie funktioniert es nicht wie freigestellt.Spaltenoffset in Bootstrap 3 ist immer auf der rechten Seite

.main-content { 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
.sidebar { 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.container { 
 
    border: 1px solid blue; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Example</title> 
 
</head> 
 
<body> 
 
    <div class="container main-container"> 
 
     <div class="row"> 
 
      <!-- Sidebar --> 
 
      <div class="sidebar col-md-3"> 
 
      sidebar 
 
      </div> 
 
      <!-- Main Content --> 
 
      <div class="main-content col-md-8 offset-md-1"> 
 
      content 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

Um zu sehen, was ich meine, das Beispiel und swithc zur Seite Modus läuft. Wie Sie sehen, befindet sich der Offset am besten zwischen der Seitenleiste und dem Container. Es spielt auch keine Rolle, ob ich es zur Seitenleiste oder zum Hauptinhaltselement hinzufüge.

Was ist falsch an meinem Beispiel?

Antwort

1

Verwenden Sie col-md-offset-1 anstelle von offset-md-1 zum Inhalt div.

.main-content { 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
.sidebar { 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.container { 
 
    border: 1px solid blue; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Example</title> 
 
</head> 
 

 
<body> 
 
    <div class="container main-container"> 
 
    <div class="row"> 
 
     <!-- Sidebar --> 
 
     <div class="sidebar col-md-3"> 
 
     sidebar 
 
     </div> 
 
     <!-- Main Content --> 
 
     <div class="main-content col-md-8 col-md-offset-1"> 
 
     content 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

+0

ah, danke. Aber können Sie vielleicht darauf hinweisen, warum .offset-md-1 hier nicht funktioniert? – xotix

+0

@xotix Denn soweit ich weiß gibt es keine Klasse wie 'offset-md-1'. Um Offset zu geben, sollten Sie 'col-md-offset- {no.}' class verwenden. Wenn diese Antwort zur Lösung des Problems beigetragen hat, können Sie sie als Antwort markieren, indem Sie auf das Kontrollkästchen neben meiner Antwort klicken –

Verwandte Themen