引導：右對齊垂直丸

我的相關代碼：引導：右對齊垂直丸

<!-- 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>

這給我對齊列的左側一個漂亮的垂直丸： pills stuck to the left。但我想讓它們像右邊那樣對齊（在mspaint中製作）：pills on the right。

我試過每個對齊選項，我可以想到...但沒有奏效。謝謝！

來源

2017-01-16 Yogev Levy

你不希望設置'.nav { 填充右：0; }'？ – Banzay

@Yogev徵收答案幫助你。或者確實告訴你是否有任何問題。 – ab29007

@kittyCat無需標記我，我們並不都有時間檢查所有的時間：P是的，它的工作，謝謝！ –

ul右側有默認填充，將其更改爲左側。我將CSS包裝在媒體查詢中，以便它們在桌面上對齊，但可以將其刪除。

我也設置了padding:0;爲.sidenav和一些邊框來顯示對齊。

@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>

來源

2017-01-16 14:02:27 ab29007

引導：右對齊垂直丸

回答

相關問題