Twitter bootstrap 3 面板标题中的嵌套列

我希望我的面板标题包含一些文本和一个按钮，前者左对齐，后者右对齐。但是，只要我将类

行

应用于我的面板标题，它就会脱离父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>

管理您的订阅

结果如下：

---

我怎样才能纠正这一点？

您可能需要以下内容

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

管理您的订阅

---

让我知道它是否有效

您可以使用

向左拉

和

向右拉

而不是网格系统，因此即使在小屏幕上，组件也将在单行上渲染（如果有足够的空间）：

管理您的订阅

在我看来，您只需要将“行”移动到“面板标题”内，而不是在同一级别，因为它们都具有相对的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”中，以解决按钮的边距问题。

谢谢！这很有帮助。我现在唯一的抱怨是按钮贴在右边太厚了。我该如何补救？好的旧填充/边距？是的，好的ol填充就可以了。我建议创建一个新的简单css类来添加所需的边距，并让“div”（包装按钮）标记使用它。顺便说一句，很高兴我能帮上忙。@MarwanAlani只是想知道为什么说

pull right

会带来麻烦。在我看来，如果按钮内的文本较长，则解决方案不会呈现良好效果。此外，如果屏幕小于768px，按钮会出现在左侧。@VincenzoC上面提供的代码OP就是这种情况。但是，对于您提供的示例，它可以完美地工作。一般的想法是避免在导航栏和标题上使用“pull”类，以简化将来的可升级性（“pull”类在“collapse”中工作不太好）。不管怎样，这只是我个人的观点，也是我随着时间的推移注意到的最佳实践。无论如何，这不是一条规则，你可以使用任何你认为合适的设计/工具来实现某些东西。@MarwanAlani非常感谢你的解释。我想知道我是否遗漏了什么。我在我的生产代码中使用了

向左拉

+

向右拉

+

clearfix

，我想确保我没有暴露于潜在的布局问题。现在我知道我的解决方案是好的，它不会违反任何规则。

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