Zentrum dt Elemente in dl

Ich habe eine Beschreibungsliste wie folgt aus:Zentrum dt Elemente in dl

<h2 class="page-title">Details</h2> 

<div class="well details-form"> 
    <dl class="dl-horizontal text-center"> 
     <dt> 
      Test 1: 
     </dt> 

     <dd> 
      Test 1 
     </dd> 

     <dt class="margin-space"> 
      Test 2: 
     </dt> 

     <dd class="margin-space"> 
      Test 2 
     </dd> 

     <dt class="margin-space"> 
      Test 3: 
     </dt> 

     <dd class="margin-space"> 
      Test 3 
     </dd> 
    </dl> 
</div>

Die text-center-Klasse ist ein Teil der Bootstrap-Bibliothek und es scheint nur die dd Elemente zum Zentrum, aber nicht die dt Elemente.

Hier ist eine Bootply, um ein Bild von meinem Problem zu geben.

Wie zentriere ich die dt Elemente unter dem h2 Elemente (nicht direkt unter, aber ein wenig nach links, so dass das h2 Elemente zwischen den dt und dd Elementen)?

Jede Hilfe wird geschätzt.

UPDATE

Bild aus der Antwort von mhatch bereitgestellt:

Das Ergebnis sieht immer noch wie folgt aus: Bootply. Just centered dt Elemente .. aber sie bewegen sich nicht unter den Details Element.

Was ich suche

          Details 

            Test 1:  Test 1 
            Test 2:  Test 2 
            Test 3:  Test 3

Quelle

2017-01-03 GTown-Coder

Muss ein Problem mit Bootstrap sein, auf sauber HTML funktioniert gut: https://jsfiddle.net/4cpkusc5/ – Troyer

Funktioniert auch hier gut: https: // jsfiddle.net/Syden/49uLa9o2/ – Syden

@stackingjasoncooper Link erneut prüfen –

Wenn Sie nicht die semantische einer Definitionsliste <dl> verwenden müssen, empfehle ich Ihnen es Spalten in den normalen Bootstrap zu ändern. Sonst wäre es zu viel Aufwand, die Standard-Bootstrap-Eigenschaften zu überschreiben, um die <dd> und <dt> zu zentrieren.

<div class="row"> 
    <div class="col-xs-6"> 
     Test 1: 
    </div> 
    <div class="col-xs-6"> 
     Test 1 
    </div> 
</div>

https://jsfiddle.net/tomsarduy/0z67j2pw/

Quelle

2017-01-03 15:56:40

aktualisiert Frage –

@BviLLe_Kid: siehe meine Bearbeitung –

In den Bootstrap-Stile die folgende CSS-Regel wird die <dt> Einstellung rechts ausrichten:

.dl-horizontal dt { 
    ... 
    text-align: right; 
    ... 
}

einfach eine CSS-Regel hinzufügen, es zu überschreiben. Nach die Bootstrap-Stile umfassen diese CSS-Regel:

.dl-horizontal dt{ 
    text-align: center; 
}

Quelle

2017-01-03 15:49:08 mhatch

Dies bewegt nicht die 'dt' Elemente .. die Bootstrap-Stile setzen auch die' dt' Elemente zu schweben links mit einer Breite von 160px .. Ich werde meine Frage mit einem Bild –

aktualisieren Frage –

Ich empfehle Verengen der dl Spalte. Im Moment ist die dl die volle Breite des Wellcontainers, die viel zu breit ist, um das gewünschte Layout zu erhalten.

Sie könnten das Bootstrap-Grid-System verwenden, um es auf ein Drittel des Containers zu beschränken. Siehe hierzu Bootply.

Dann könnten Sie weiter gehen und die dt und dd Elemente mehr wie gewünscht stylen.

Quelle

2017-01-03 16:08:03 stackingjasoncooper

Zentrum dt Elemente in dl

Antwort

Verwandte Themen