Jak mogę dodać tekst po lewej i prawej stronie tytułu mojego panelu?

Question

Używam Twittera Bootstrapa, aby zabrać mi dużo pracy z CSS. Chcę używać ich paneli do pewnego rodzaju "postu" przez użytkownika. Chciałbym, aby sekcja Tytułu zawierała Edycja/Usuwanie hiperłączy po prawej stronie tytułu, podczas gdy sam Tytuł jest wyrównany po lewej stronie.

Próbowałem to bez powodzenia:

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

Tytuł powinien być wyrównany w lewo (jak ma to domyślnie), ale chcę dodatkowy tekst „Hey”, aby pokazać się na prawym boku .

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

Answer 1

Twitter bootstrap ma dwie klasy, która może pomóc.

Pierwsza to .text-right, a druga to .pull-right, więc dodaj tę dwie klasy i zobacz.

Answer 2

Dodaj float:right i usunąć text-align: right

.text-right { 
    float:right; 
} 

Answer 3

Lewy i prawy przycisk w nagłówku panelu. Możesz zastąpić te przyciski linkami.

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

Answer 4

malutki clearfix prawda

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

Można spróbować tu http://jsfiddle.net/b1Lec5ge/

Answer 5

rozwiązanie Praca na pytanie

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

Każda sekcja panelu może posiadać wiersz (S) 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> 

Tutaj masz miniaturkę z col-xs-xxx dla małego ekranu małego. Dokumentacja 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>

Answer 6

myślę, to może pomóc też. Można użyć zarówno bootstrap wierszy i kolumn podzielić panel na dwie części, tak jak ja tutaj:

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