Bootstrap: align rechte vertikale Pillen

Mein entsprechenden Code:Bootstrap: align rechte vertikale Pillen

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row content"> 
 
     <div class="col-lg-10"> 
 
     <div class="tab-content"> 
 
      <div id="AAA" class="tab-pane fade in active"> 
 
      <h2>AAA</h2> 
 
      <p> 
 
       Lorem ipsum dolor 
 
      </p> 
 
      </div> 
 

 

 
      <div id="BBB" class="tab-pane fade in"> 
 
      <h2>BBB</h2> 
 
      <p> 
 
       Lorem ipsum dolor 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 

 

 
     <div class="col-lg-2 sidenav" dir="rtl"> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
      <li class="active"><a href="#AAA" data-toggle="tab" class="list-group-item">AAA</a></li> 
 
      <li><a href="#BBB" data-toggle="tab" class="list-group-item">BBB</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div>  
 
</body>

Diese geben Sie mir eine schöne vertikale Pillen links von der Spalte ausgerichtet: pills stuck to the left. Aber ich möchte, dass sie nach rechts ausgerichtet sind, wie dies (in mspaint gemacht): pills on the right.

Ich versuchte jede Ausrichtung Option, die ich mir vorstellen konnte ... Aber nichts hat funktioniert. Vielen Dank!

Quelle

2017-01-16 Yogev Levy

wollen Sie nicht '.nav setzen { padding-right: 0; } '? – Banzay

@Yogev Levy Hat Ihnen die Antwort geholfen? oder sagen Sie, ob Sie Probleme damit haben. – ab29007

@kittyCat keine Notwendigkeit, mich zu markieren, wir haben nicht alle Zeit, SO die ganze Zeit zu überprüfen: P Und ja, es hat funktioniert, danke! –

Die ul hat Standardpolsterung rechts, ändern Sie sie nach links. Ich habe die CSS in eine Medienabfrage verpackt, so dass sie rechts auf dem Desktop ausgerichtet werden, aber Sie können das entfernen.

Ich habe auch padding:0; für .sidenav und einige Grenze gesetzt, um die Ausrichtung zu zeigen.

@media (min-width:768px){ 
 
    .nav.nav-pills{ 
 
    padding-right:0; 
 
    padding-left:40px; 
 
    } 
 
    .sidenav{ 
 
    border:1px solid black; 
 
    padding:0 !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row content"> 
 
     <div class="col-lg-10"> 
 
     <div class="tab-content"> 
 
      <div id="AAA" class="tab-pane fade in active"> 
 
      <h2>AAA</h2> 
 
      <p> 
 
       Lorem ipsum dolor 
 
      </p> 
 
      </div> 
 

 

 
      <div id="BBB" class="tab-pane fade in"> 
 
      <h2>BBB</h2> 
 
      <p> 
 
       Lorem ipsum dolor 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 

 

 
     <div class="col-lg-2 sidenav" dir="rtl"> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
      <li class="active"><a href="#AAA" data-toggle="tab" class="list-group-item">AAA</a></li> 
 
      <li><a href="#BBB" data-toggle="tab" class="list-group-item">BBB</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div>  
 
</body>

Quelle

2017-01-16 14:02:27 ab29007

Bootstrap: align rechte vertikale Pillen

Antwort

Verwandte Themen