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

How can I add text on the left and right of my Panel Title?

提问by Tada

I'm using Twitter Bootstrap to take away a lot of the CSS work for me. I want to use their Panels for a sort of "Post" by a User. I'd like to have the Title section include Edit/Delete Hyperlinks on the RIGHT side of the Title, while the Title itself is aligned on the left.

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

I've tried this with no success:

我试过这个没有成功：

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

Title should be aligned on the left (as it does by default) but I want the additional text "Hey" to show up on the RIGHT side.

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

EDIT: http://getbootstrap.com/dist/css/bootstrap.css

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

回答by Dipesh Parmar

Twitter bootstrap has two class which can help you.

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

First is .text-rightand second is .pull-rightso add this two class and see.

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

回答by Pangur

tiny clearfixdoes it

微小的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>

You can try it here http://jsfiddle.net/b1Lec5ge/

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

回答by Devang Rathod

Add float:rightand remove text-align: right

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

.text-right {
  float:right;
}

回答by Camille

Working solution for question

问题的工作解决方案

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

Each section of panel can hold row(s) with col-xx-xx

面板的每个部分都可以用 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>

Here you have a snipplet with col-xs-xxx for match smallscreen. Documentation here.

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

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

回答by ymakux

Left and right buttons in panel header. You can replace these buttons with links.

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

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

回答by arksnorman

I think this can help too. You can use both bootstrap rows and columns to divide the panel into two, like I did here:

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

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