Pozycjonowanie komponentów wewnątrz nagłówka panelu startowego

Question

Przy użyciu funkcji bootstrap, w jaki sposób można wyrównać komponenty w poziomie w obrębie nagłówka panelu? Aby mieć: title: wyrównane do lewej, btn1: wyśrodkowane, btn2: wyrównane w prawo.

<div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">title</h3> 

      <button class="btn">btn1</button> 

      <button class="btn">btn2</button> 
     </div> 

     <div class="panel-body"> 
      text 
     </div> 
    </div> 
</div> 

Próbowałem stworzyć klasy bootstrap „wiersz” i kolumny, ale rząd wychodzi poza panelu pozycji, ponieważ panel jest wewnątrz innego kol-MD-6:

Answer 1

prawo droga z .row i .col jest jak ten

<div class="panel panel-default container-fluid"> 
    <div class="panel-heading row"> 
     <div class="col-xs-4"><h3 class="panel-title">title</h3></div> 
     <div class="col-xs-4 text-center"><button class="btn">btn1</button></div> 
     <div class="col-xs-4"><button class="btn pull-right">btn2</button></div> 
    </div> 
    <div class="panel-body"> 
     text 
    </div> 
</div> 

http://jsfiddle.net/j7u53eav/3

Answer 2

Korzystanie odpowiedź Ch.Idea jako punktem wyjścia, możesz dodać klasę wierszy do swojej panel-heading. Nie musisz jednak sprawiać, żeby panel był container-fluid.

Ponieważ klasa Bootstrap row dodaje marginesy ujemne, wystarczy je usunąć. Zakładając, że za każdym razem, gdy row jest dodawana do panel-heading co chcesz ten problem, jest to tak proste jak dodanie trochę CSS:

.panel-heading.row { 
    margin: 0 
} 

Ponieważ kolumny mają już obicia można go podjąć dalsze usuwając lewo i prawo od row także:

.panel-heading.row { 
    margin: 0; 
    padding-left: 0; 
    padding-right: 0; 
} 

I ze względu na solidność, zmodyfikowana kopia pracy Ch.Idea za:

<div class="panel panel-default"> 
    <div class="panel-heading row"> 
     <div class="col-xs-4"><h3 class="panel-title">title</h3></div> 
     <div class="col-xs-4 text-center"><button class="btn">btn1</button></div> 
     <div class="col-xs-4"><button class="btn pull-right">btn2</button></div> 
    </div> 
    <div class="panel-body"> 
     text 
    </div> 
    <table class="table"> 
     <!-- insert rest of table here --> 
    </table> 
</div> 

I zmodyfikowana jsfi DDLE pokazując pełne szerokości tabel:

http://jsfiddle.net/my7axd1b/3/