Как добавить текст слева и справа от заголовка панели?

Я использую Twitter Bootstrap, чтобы убрать много работы CSS для меня. Я хочу использовать свои панели для своего рода "Поста" пользователя. Я хотел бы, чтобы раздел Title включал Edit/Delete Hyperlinks на правой стороне заголовка, в то время как сам заголовок выравнивается слева.

Я пробовал это без успеха:

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

Заголовок должен быть выровнен слева (как и по умолчанию), но я хочу, чтобы дополнительный текст "Эй" отображался на правой стороне.

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

Ответ 1

Twitter bootstrap имеет два класса, которые могут вам помочь.

Сначала .text-right, а второй - .pull-right, поэтому добавьте этот два класса и посмотрите.

Ответ 2

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

Ответ 3

Добавьте float:right и удалите text-align: right

.text-right {
  float: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>

Здесь у вас есть snipplet с 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>

Ответ 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>