Wie man einen Bootstrap linke und rechte Spalte statisch macht

Ich habe 3 Bootstrap-Spalte nebeneinander. Ich möchte, dass die linke und die rechte Spalte statisch sind und nur die mittlere Spalte.Wie man einen Bootstrap linke und rechte Spalte statisch macht

Ich habe versucht, die Spalten zu fixieren, aber das ändert die Breite der Spalte und wenn ich die richtige Spalte fest, dann wird es links von der Seite geschoben.

Gibt es eine andere Möglichkeit, es ohne das feste Attribut zu beheben?

Hier ist ein Bild von meiner Seite.

Hier ist mein Code:

<div class=" col col-sm-2 leftBar" style="padding: 10px;"> 

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #87CEEB;"> 

     <div class="list-group"> 
      <a href="#" class="list-group-item active">List <span class="badge">4</span></a> 
      <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 1</a> 
      <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 2</a> 
      <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 3</a> 
      <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 4</a> 
     </div> 

    </div> 

</div> 

<div class=" col col-sm-8 centreContent" style="padding: 10px;"> 

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #DCDCDC;"> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
     <p>This is the content</p> 
    </div> 

</div> 

<div class=" col col-sm-2 rightBar" style="padding: 10px;"> 

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #87CEEB;"> 
     <p>This is the Right Bar</p> 
    </div> 

</div>

Quelle

2017-01-16 Damian

Wenn Sie RightBar auf der rechten Seite positionieren, wird die Position behoben wird gut funktionieren. https://jsfiddle.net/9zgeqv3s/ plus ein Bootstrap-Offset auf einer zentralen Spalte –

Thanx @ GL.awog. Das hat so funktioniert, wie ich es wollte. Bitte posten Sie es als Antwort, damit ich es akzeptieren kann. – Damian

demo

, wenn Sie Position rightbar auf der rechten Seite, feste Position wird gut tun. plus einen Bootstrap-Offset in einer zentralen Spalte:

<div class=" col col-sm-8 col-sm-offset-2 centreContent" style="padding: 10px;">....</div>

Quelle

2017-01-16 14:14:13

Dieses Problem kann auf zwei Arten gelöst werden ...

make linken Navigationsleiste und rechten Seitenleiste befestigt. für linke bar

position : fixed; 
left:0; 
top:50px;

für rechte bar

position :fixed; 
right:0; 
top:50px;

oder

Sie diese CSS Mitte div ..

max-heght:750px; 
overflow-x:auto;

Quelle

2017-01-16 12:40:37

Wenn Sie diese beiden Spalten fixieren, werden sie aus dem Fluss genommen, den die Floats verwenden. Sie müssen "col-sm-offset-2" zur mittleren Spalte hinzufügen, um den fehlenden Speicherplatz zu berücksichtigen, wenn Sie auf "display: fixed" umgestellt haben. –

ohk so wird die zweite Lösung in Ordnung sein .. –

Zunächst einmal anwenden können, wickeln Sie Ihre Spalten in einer .row und in einer .container-fluid.

Dann erstellen Sie eine neue Klasse namens (zum Beispiel) .fixed-top mit der Eigenschaft: position: fixed;. Und wenden Sie diese Klasse auf die linke und rechte Spalte an.

Fügen Sie dann die Spalte für den Bootstrap-Offset .col-**-offset-* zur mittleren bzw. rechten Spalte hinzu. (In Ihrem Fall: .col-sm-offset-2 und .col-sm-offset-10).

prüfen dieses Beispiel mit Ihrem Code: http://www.bootply.com/RhXeray5xT

Quelle

2017-01-16 12:51:22 jaumemk

Wie man einen Bootstrap linke und rechte Spalte statisch macht

Antwort

Verwandte Themen