ブートストラップ：右垂直の丸薬

私の関連するコードを揃える： pills stuck to the left：ブートストラップ：右垂直の丸薬

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

は、これは私の列の左に整列素敵な垂直錠剤を与えます。しかし、私はそれらを右のように整列させたいと思います（これはmspaintで作られています）：pills on the right。

私は考えることができるすべての整列オプションを試しました...しかし、何も働いていませんでした。ありがとうございました！

出典

2017-01-16 Yogev Levy

あなたは '.nav { パディング右設定したくない：0; } '？ – Banzay

@ Yogev Levy答えがあなたを助けましたか？あなたがそれに問題があるかどうかを教えてください。 – ab29007

@kittyCat私にタグを付ける必要はありません。すべての時間を常にチェックする時間はありません：Pそしてはい、それはうまくいきました！ –

ulの右側にデフォルトのパディングがあります。左側に変更してください。私はメディアのクエリの中にCSSをラップして、デスクトップ上で正しく整列させるようにしましたが、削除することができます。

.sidenavの場合はpadding:0;と設定し、境界線を表示する場合もあります。

@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

ブートストラップ：右垂直の丸薬

答えて

関連する問題