面板标题中的嵌套列

时间:2015-12-21 15:36:23

标签: twitter-bootstrap-3

我希望我的面板标题包含一些文本和一个按钮,前者左对齐,后者右对齐。但是,只要我将类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>

结果如下:

enter image description here

我该如何纠正?

3 个答案:

答案 0 :(得分:5)

在我看来,你只需将“行”移动到“面板标题”内而不是在同一级别上,因为它们都具有相对的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>

它给了我这个输出(这是你想要的,我希望): enter image description here

我希望有帮助

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

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

答案 1 :(得分:1)

您可能需要以下内容吗?

<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="row">
      <div class="col-md-10 col-sm-10">
        <h4>Manage Your Subscriptions</h4>
      </div>
      <div class="col-md-2 col-sm-2">
        <a href="#" class="btn btn-default pull-right" >Log out</a>
      </div>
    </div>
  </div>
  <div class="panel-body">
  </div>
</div>

让我知道它是否有效

答案 2 :(得分:0)

您可以使用pull-leftpull-right代替网格系统,因此即使在小屏幕上(如果有足够的空间),组件也会在单行上渲染:

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="pull-left">Manage Your Subscriptions</h4>
        <span class="pull-right">
            <a href="#" class="btn btn-default" >Log out</a>
        </span>
        <div class="clearfix"> </div>
    </div>
    <div class="panel-body">
    </div>
</div>