如何在面板标题的左侧和右侧添加文本？答案

【问题标题】：How can I add text on the left and right of my Panel Title?如何在面板标题的左侧和右侧添加文本？
【发布时间】：2013-08-21 08:56:36
【问题描述】：

我正在使用 Twitter Bootstrap 为我完成大量 CSS 工作。我想将他们的面板用于用户的某种“发布”。我希望标题部分在标题的右侧包含编辑/删除超链接，而标题本身在左侧对齐。

我试过这个没有成功：

<div class="row">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">@vModel.Title <span class="text-right">Hey</span></h3>
        </div>
        <div class="panel-body">
            @vModel.Blog
        </div>
    </div>
</div>

标题应在左侧对齐（默认情况下），但我希望附加文本“嘿”显示在右侧。

编辑： http://getbootstrap.com/dist/css/bootstrap.css

【问题讨论】：

你试过在标题上使用 clear: right
粘贴panel-title和text-right类代码的代码。并尝试在 text-right 类中添加 float:right。

标签： html css twitter-bootstrap

【解决方案1】：

Twitter bootstrap 有两个类可以帮助你。

第一个是.text-right，第二个是.pull-right，所以添加这两个类看看。

【讨论】：

因为向右拉实际上是将整个元素向右浮动...而文本对齐只是将文本设置为元素的特定宽度的右侧。
我讨厌浮动，但这似乎是迄今为止我发现的最好的方法 :-(
请同时采用@Pangur 的clearfix。没有那个被拉出的元素也有一半在身体部位
这导致后台不适合我。 @Camille 行版本对我来说非常好用！

【解决方案2】：

微小的clearfix做到了

<div class="panel panel-default">
    <div class="panel-heading">
         <div class="panel-title pull-left">
             Works fine for me!
         </div>
        <div class="panel-title pull-right">Text on the right</div>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">Panel content</div>
</div>

你可以在这里试试http://jsfiddle.net/b1Lec5ge/

【讨论】：

感谢 clearfix 命中。没有它，布局真的很愚蠢：D

【解决方案3】：

添加float:right 并删除text-align: right

.text-right {
  float:right;
}

【讨论】：

不要这样做！您（几乎）永远不想在另一个库的源代码中工作。相反，看看是否已经存在某些东西，否则创建你自己的类。在这种情况下，.pull-right 类已经存在，它完全按照您让 .text-right 所做的工作。

【解决方案4】：

问题的有效解决方案

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-4 text-left panel-title">@vModel.Title</div>
            <div class="col-md-8 text-right"><a>hyperlink1</a> <a>hyperlink2</a></div>
        </div>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>

面板的每个部分都可以使用 col-xx-xx 保存行

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-md-4 text-left">Header left</div>
            <div class="col-md-4 text-center">Header center</div>
            <div class="col-md-4 text-right">Header right</div>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6 text-right">Body left align right</div>
            <div class="col-md-6 text-left">Body right align left</div>
        </div>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-md-3 text-center">Footer 1/4 center</div>
            <div class="col-md-3 text-center">Footer 2/4 center</div>
            <div class="col-md-3 text-center">Footer 3/4 center</div>
            <div class="col-md-3 text-center">Footer 4/4 center</div>
        </div>
    </div>
</div>

这里有一个带有 col-xs-xxx 的片段，用于匹配 small 屏幕。文档here。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-xs-4 text-left">Header left</div>
            <div class="col-xs-4 text-center">Header center</div>
            <div class="col-xs-4 text-right">Header right</div>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-6 text-right">Body left align right</div>
            <div class="col-xs-6 text-left">Body right align left</div>
        </div>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-3 text-center">Footer 1/4 center</div>
            <div class="col-xs-3 text-center">Footer 2/4 center</div>
            <div class="col-xs-3 text-center">Footer 3/4 center</div>
            <div class="col-xs-3 text-center">Footer 4/4 center</div>
        </div>
    </div>
</div>

【讨论】：

【解决方案5】：

面板标题中的左右按钮。您可以将这些按钮替换为链接。

<div class="panel-heading text-right">
  <div class="nav"><!-- clears floated buttons -->

    <div class="btn-group pull-left" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="checkbox" autocomplete="off"><i class="fa fa-toggle-on"></i>
      </label>
    </div>

    <div class="btn-group pull-right" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="checkbox" autocomplete="off"><i class="fa fa-trash"></i>
      </label>
    </div>

  </div>
</div>

【讨论】：

【解决方案6】：

我认为这也有帮助。您可以使用引导行和列将面板分成两部分，就像我在这里所做的那样：

<div class="panel panel-default">

    <div class="panel-body">

        <div class="row">

            <div class="col-md-6">

                <p>Text on left</p>

            </div>

            <div class="col-md-6">

                <p>Text on right</p>

            </div>

        </div>

    </div>

</div>

【讨论】：