Positionieren von Komponenten innerhalb eines Bootstrap-Bedienfelds - Überschrift

Wie können Sie mithilfe des Bootstrap-Verfahrens Komponenten innerhalb einer Bedienfeldüberschrift horizontal ausrichten? Um zu haben: Titel: nach links ausgerichtet, btn1: zentriert, btn2: nach rechts ausgerichtet.Positionieren von Komponenten innerhalb eines Bootstrap-Bedienfelds - Überschrift

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

Ich habe versucht, eine Bootstrap-Klasse „Zeile“ und Spalten zu erstellen, aber die Zeile geht außerhalb der Panel-Überschrift, da die Platte in einem anderen col-md-6: result of using columns

Quelle

2015-03-06 Warrio

Add Klasse Pull-rechts, um die Komponenten h3 – dowomenfart

ein Recht Weg mit .row und .col zu gehen, ist wie dieses

<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

Quelle

2015-03-06 13:59:36

ausgerichtet sind perfekt auf Ihren Code. Die Reihe überschreitet jedoch die horizontalen Grenzen des Panels, wie in meiner Frage gezeigt. und es sieht so aus, als ob der Titel nicht vertikal mit den anderen Komponenten ausgerichtet ist. – Warrio

In diesem Fall können Sie es in einen Behälter oder eine Behälterflüssigkeit geben. http://jsfiddle.net/j7u53eav/1/ –

Super! funktioniert! – Warrio

Ch.Idea Antwort als Startpunkt verwenden, Sie können eine Zeilenklasse zu Ihrem panel-heading hinzufügen. Sie müssen das Panel jedoch nicht auf container-fluid setzen.

Da die Klasse Bootstrap row negative Ränder hinzufügt, müssen Sie sie nur entfernen. jedes Mal ein row wird zu einer panel-heading Angenommen, Sie dieses Verhalten wollen würde, dann ist es so einfach, wie einige CSS hinzufügen:

.panel-heading.row { 
    margin: 0 
}

Da Spalten bereits Polsterung haben, können Sie es nehmen weiter durch die linke entfernen und rechts von der Zeile auch:

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

Und aus Gründen der Gründlichkeit, eine modifizierte Kopie der Ch.Idea Arbeit:

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

und ein modifiziertes jsfi DDLE zeigt voller Breite Tabellen:

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

Quelle

2016-05-10 15:32:48

Positionieren von Komponenten innerhalb eines Bootstrap-Bedienfelds - Überschrift

Antwort

Verwandte Themen