我在右侧有一个侧边栏,它使用 Bootstrap 网格的 3 个元素。我试图让内容始终位于此侧边栏的右侧(因此它们必须始终占据 9)。我目前有一个 Accordion 和一个 h2,但是我很难将它们与页面上的其余内容左对齐。侧边栏编码如下:
<div class="col-md-3">
<div class="list-group">
<a href="example.html" class="list-group-item active">example</a>
</div>
</div>
每个“content 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 和 Accordion 。
<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>
帮助可视化问题的图像
没有右拉
最佳答案
从类列表中删除pull-right
:
<div class="col-md-9 pull-right">
<!-------------------^^^^^^^^^^ This is the culprit to pull it to the right.
pull-right
类只是将 float: right !important;
添加到样式中,使内容向右推送。
关于html - Bootstrap 对齐 h2 和 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45551322/