Bootstrap Panel ausrichten

Germanikus · 4. Mai 2016

Hallo,
wie kann ich die Panels mit dem folgenden Code so ausrichten wie im Anhang?

HTML

<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">Details</h3>
					</div>
				<div class="panel-body ">
									<div class="panel panel-primary">
										<div class="panel-heading">
											<h3 class="panel-title">Zusammenfassung</h3>
										</div>
										<div class="panel-body">
											Panel-Inhalt
										</div>
									</div>
								<div class="panel panel-primary">
									<div class="panel-heading">
										<h3 class="panel-title">Lieferadresse</h3>
									</div>
									<div class="panel-body">
										Panel-Inhalt
									</div>
								</div>
							<div class="panel panel-primary">
								<div class="panel-heading">
									<h3 class="panel-title">Adresse des Verkäufers</h3>
								</div>
								<div class="panel-body">
									Panel-Inhalt
								</div>
							</div>
						<div class="panel panel-primary">
							<div class="panel-heading">
								<h3 class="panel-title">Meine Möglichkeiten</h3>
							</div>
							<div class="panel-body">
								Panel-Inhalt
							</div>
						</div>
					<div class="bs-example" data-example-id="table-within-panel">
						<div class="panel panel-primary">
							<div class="panel-heading">Yugioh Einzelkarten</div>
								<table class="table">
									<thead>
										<tr>
											<th>#</th>
											<th>Vorname</th>
											<th>Nachname</th>
											<th>Benutzername</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">1</th>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
									</tbody>
								</table>
						</div>
					</div>
				</div>
			</div>

Alles anzeigen

MrMurphy · 4. Mai 2016

Hallo

Deine Angaben sind für konkrete Hilfe leider viel zu mager.

Der Skizze ist weder zu entnehmen

a) in welchen Kästen/Container welche Informationen stehen sollen

b) wie sie sich die Kästen im 12er-Grid aufteilen sollen

c) ob, und wenn ja, wie sich die Kästen responsive verhalten sollen.

Die gleiche Höhe des ersten sowie der zweiten und dritten Kästen sind mit Bootstrap-Mitteln nicht zu erreichen. Da wirst du nacharbeiten müssen.

Grundsätzlich musst du für die Aufteilung zunächst ein Gerüst aus Containern mit den dafür gedachten Bootstrap-Klassen erstellen. Das Gerüst könnte folgendermaßen aussehen:

Code

<main class="container-fluid">




      <section class="row">
         <div class="col col-md-3">
            <p>Inhalt des ersten Kastens</p>
         </div>
         <div class="col col-md-2 col-md-offset-1">
            <p>Inhalt des zweiten Kastens</p>
            <p>Direkt darunter Inhalt des dritten Kastens.</p>
         </div>
      </section><!-- Ende row -->




      <section class="row">
         <div class="col col-md-12">
            <p>Inhalt des vierten Kastens</p>
            <p>Direkt darunter Inhalt des fünften Kastens.</p>
         </div>
      </section><!-- Ende row -->




   </main><!-- Ende container -->

Alles anzeigen

Der Übersichtlichkeit halber habe ich statt der Kästen erstmal Absätze (p) genommen. Praktisch sieht das Ergebnis dann so aus:

http://boratb.bplaced.net/index09.html

Mit deinem Inhalt könnte das HTML dann folgendermaßen aussehen:

Code

<main class="container-fluid">




      <div class="panel panel-primary">




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




            <section class="row">




               <div class="col col-md-3">
                  <div class="panel panel-primary">
                     <div class="panel-heading">
                        <h3 class="panel-title">Zusammenfassung</h3>
                     </div>
                     <div class="panel-body">
                        Inhalt Zusammenfassung
                     </div>
                  </div>
               </div>




               <div class="col col-md-2 col-md-offset-1">
                  <div class="panel panel-primary">
                     <div class="panel-heading">
                        <h3 class="panel-title">Lieferadresse</h3>
                     </div>
                     <div class="panel-body">
                        Inhalt Lieferadresse
                     </div>
                  </div>
                  <div class="panel panel-primary">
                     <div class="panel-heading">
                        <h3 class="panel-title">Adresse des Verkäufers</h3>
                     </div>
                     <div class="panel-body">
                        Inhalt Adresse des Verkäufers
                     </div>
                  </div>
               </div>




            </section><!-- Ende row -->




            <section class="row">




               <div class="col col-md-12">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                     <h3 class="panel-title">Meine Möglichkeiten</h3>
                  </div>
                  <div class="panel-body">
                     Inhalt Meine Möglichkeiten
                  </div>
               </div>
                  <div class="bs-example" data-example-id="table-within-panel">
                     <div class="panel panel-primary">
                        <div class="panel-heading">Yugioh Einzelkarten</div>
                        <table class="table">
                           <thead>
                              <tr>
                                 <th>#</th>
                                 <th>Vorname</th>
                                 <th>Nachname</th>
                                 <th>Benutzername</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <th scope="row">1</th>
                                 <td>Mark</td>
                                 <td>Otto</td>
                                 <td>@mdo</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>




            </section><!-- Ende row -->




         </div>




      </div>




   </main><!-- Ende container -->

Alles anzeigen

Und praktisch dann

http://boratb.bplaced.net/index10.html

Das responsive Verhalten kann noch mit zusätzlichen Klassen (.col-xs-, .col-sm- und .col-lg- zu den bereits vorhandenen Klassen .col-md-) verfeinert werden.

Gruss

MrMurphy

Germanikus · 5. Mai 2016

Genau so.
Danke^^

Bootstrap Panel ausrichten

Jetzt mitmachen!

Teilen