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”中以解决按钮的边距问题。

Answer 2

您可能需要以下内容吗？

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

让我知道它是否有效

Answer 3

您可以使用pull-left和pull-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>

面板标题中的嵌套列

3 个答案: