面板标题中的嵌套列

Question

我希望我的面板标题包含一些文本和一个按钮,前者左对齐,后者右对齐.但是一旦我将类应用row到我的面板标题,它就会突破父div并占据我认为的容器宽度.

这是我正在使用的代码:

<div class="panel panel-primary">
    <div class="panel-heading row">
        <h4 class="col-md-11">Manage Your Subscriptions</h4>
        <div>
            <a href="#" class="btn btn-default col-md-1" >Log out</a>
        </div>
    </div>
    <div class="panel-body">
    </div>
</div>

这是结果:

我怎么能纠正这个？

Answer 1

在我看来,你只需要将"行"移动到"面板标题"内而不是在同一级别上,因为它们都具有相对的CSS定位属性.我尝试了以下代码:

    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
                <h4 class="col-md-11">Manage Your Subscriptions</h4>
                <div class="col-md-1">
                    <a href="#" class="btn btn-default" >Log out</a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            Stackoverflow rocks!
        </div>
    </div>

它给了我这个输出(这是你正在寻找的,我希望):

我希望有所帮助

编辑:我尝试使用"拉右",正如其他人所建议的那样,它似乎会产生更多麻烦,因为它会混淆顶部/底部边距,因为它使显示块相对于容器(我通常建议不要这样做,甚至如果它适合你).

EDIT2:将"col-md-1"类移动到封装"div"中以解决按钮的边距问题.