我的相关代码:
<!-- 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 .
我尝试了所有我能想到的对齐选项...但没有任何效果。 谢谢!
最佳答案
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>关于html - Bootstrap : Right align vertical pills，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41678009/