Question

我的相关代码：

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

我尝试了我能想到的每个对齐选项...但没有任何效果。谢谢！

Answer 1

ul右侧有默认填充，将其更改为左侧。我已将css包装在媒体查询中，以便它们在桌面上正确对齐，但您可以删除它。

我还为padding:0;设置了.sidenav，并设置了一些边框以显示对齐方式。

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap：右对齐垂直药丸

1 个答案: