Question

我右侧有一个侧边栏，它使用了3个引导网格元素。我试图让内容总是在这个侧边栏的右边（所以他们必须总是占用9）。我目前有一个手风琴和一个h2，但是我很难将它们与页面上的其他内容对齐。侧栏编码如下：

<div class="col-md-3">
            <div class="list-group">
                <a href="example.html" class="list-group-item active">example</a>
            </div>
        </div>

每个“内容div”如下（这些正确对齐）

    <div class="col-md-9 pull-right">
        <div class="panel panel-default">
             <div class="panel-heading">
                 <h4>title</h4>
             </div>
             <div class="panel-body">
                  <p>content</p>
             </div>
        </div>
   </div>

这是与内容无法正确对齐的h2和手风琴。

<div class="col-md-9 pull-right">
      <div class="row">
          <div class="col-md-12">
                 <h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
          </div>
       </div>

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading together">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What We Can Do Together</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                  <ul>
                    <li>list</li>
                  </ul>
                </div>
            </div>
        </div>

帮助可视化问题的图片

没有右拉

Answer 1

从班级列表中删除pull-right：

<div class="col-md-9 pull-right">
<!-------------------^^^^^^^^^^ This is the culprit to pull it to the right.

pull-right类只会将float: right !important;添加到样式中，这样可以正确推送内容。

Bootstrap对齐h2和手风琴

1 个答案: