So zentrieren Sie Spalten, die in einer Spalte verschachtelt sind

Probleme beim Ausrichten dieser Spalten in einer Abschnittsspalte. HierSo zentrieren Sie Spalten, die in einer Spalte verschachtelt sind

ist ein Screenshot von dem, was passiert: https://gyazo.com/cfe7bfa58e98226d8e1718792631c035

Und hier ist jsfiddle mit allen erforderlichen Code: https://jsfiddle.net/8xxgn8vr/

<!-- Testimonials Section --> 
<section id="testimonials" class="testimonials-section"> 
    <div class="container testimonials-container center-block"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="">Testimonials</h1> 
        <div class="col-lg-12"> 
         <div class="col-lg-6 testimonials"> 
          Review 1 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 2 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 3 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 4 
         </div> 
        </div> 
      </div> 
     </div> 
    </div> 
</section> 


.container.testimonials-container { 
    margin: 0 50px 0 50px; 
    width: auto; 
} 

.col-lg-6.testimonials { 
    background: #E5E4DF; 
    height: 500px; 
    padding: 25px; 
    width: 300px; 
    margin: 50px 25px 50px 25px; 
} 

.testimonials-section { 
    background: #F6F6F6; 
    height: 100%; 
    padding-top: 40px; 
    text-align: center; 
}

Es ist im Grunde ein Abschnitt für Bewertungen in index.html Seite und innerhalb des Abschnitts dort werden 4 Bewertungen sein, die ich in der Mitte ausgerichtet sein möchte.

Vielen Dank für die Hilfe im Voraus.

Quelle

2016-10-30 raimond

Bitte fügen Sie Ihren Code auf Ihre Frage –

Fertig! Das tut mir leid. – raimond

Da Sie verwenden Bootstrap Ich würde vorschlagen, nicht direkt die Breite der Rasterelemente zu ändern, wenn Sie eineerhalten 10, die eine halbe row belegen soll und es auf 300px setzen, werden Sie Bootstrap Reaktionsfähigkeit wegwerfen und es wird Ihnen schließlich eine harte Zeit geben, sich an die anderen Besonderheiten der col-lg-6 Klasse anzupassen.

Da Sie erwähnt haben, dass Sie 4 Bewertungen alle zentriert haben möchten, könnten Sie vielleicht Ihren Code ändern, um eine col-lg-3 zu verwenden, die die row in 4 gleiche Teile teilt.Überprüfen Sie dieses updated fiddle, aber es würde so gehen:

HTML:

<!-- Testimonials Section --> 
    <section id="testimonials" class="testimonials-section"> 
     <div class="container testimonials-container center-block"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h1 class="">Testimonials</h1> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 1 
       </div> 
       </div> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 2 
       </div> 
       </div> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 3 
       </div> 
       </div> 
       <div class="col-md-3"> 
       <div class="testimonials"> 
        Review 4 
       </div> 
       </div> 
      </div> 
     </div> 
    </section>

Aktualisiert CSS:

.container.testimonials-container { 
    margin: 0 50px 0 50px; 
    width: auto; 
} 

.testimonials { 
    background: #E5E4DF; 
    height: 500px; 
    padding: 25px; 
    margin: 50px 25px 50px 25px; 
} 

.testimonials-section { 
    background: #F6F6F6; 
    height: 100%; 
    padding-top: 40px; 
    text-align: center; 
}

Quelle

2016-10-30 20:48:08

Ja, ich habe meinen Fehler vor einiger Zeit bemerkt, setze alles auf 3. Danke für die Hilfe! Also war der Trick, die Breite loszuwerden und dann col-md-3 Testimonials Klasse in 2 divs zu trennen? Würde es nicht funktionieren, wenn es nur ein einzelnes div mit der Klasse = "col-md-3 testimonials" wäre? Kann ich auch min-width auf die Elemente einstellen? Da die Bewertungsbereiche auf kleineren Bildschirmen sehr klein sind, ist es schwierig, 3 Wörter pro Zeile zu lesen. – raimond

@raimond Ich habe gerade die Klasse "testimonials" von der Klasse "col-lg-3" getrennt, weil Sie den Rand veränderten, so dass er mit dem Rand col-lg-3 kollidieren würde und dann nicht unbedingt 4 Spalten zu einem passt Zeile, da der gesetzte Rand größer war als der, der vom Bootstrap definiert wurde. –

Sie können einfach Klasse "Zeile" in die äußere Spalte hinzufügen? Funktioniert für mich in deiner Geige.

<div class="row"> 
      <div class="col-lg-12 row"> 
       <h1 class="">Testimonials</h1> 
        <div class="col-lg-12"> 
         <div class="col-lg-6 testimonials"> 
          Review 1 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 2 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 3 
         </div> 
         <div class="col-lg-6 testimonials"> 
          Review 4 
         </div> 
        </div> 
      </div>

Quelle

2016-10-30 20:31:04 Heady

Aber ich habe bereits eine Reihe Klasse in der Nähe der Spitze. – raimond

Sie müssen die Zeile als direktes übergeordnetes Element einer beliebigen Spaltenfolge einfügen, um sie richtig auszurichten. Oben bearbeitet. Denken Sie daran, wenn Sie in jfiddle testen, wird col-lg nicht funktionieren, weil das "Fenster" zu klein ist. – Heady

Sie versuchen, 4 Abschnitte von Ig-6 in eine Reihe von Ig-12 zu passen. Bootstrap ist ein Gittersystem basierend auf 12 Teilen. Wenn Sie die Teile ausrichten möchten, müssen Sie immer über die 12 Abschnitte nachdenken.

Wenn Sie nur 4 Bewertungen haben, müssen Sie sicherstellen, dass Sie 12 dividieren von 4 = 3 verwenden, also benötigen Sie lg-3. Wenn Sie weniger als 4 Teile haben, aber immer noch 4 Stück brauchen, müssen Sie mit Bootstrap eingreifen. (Es gibt einen SO Post über das Ausrichten einer Reihe)

Auch in Ihrem CSS ändern Sie die Breite der Bootstraps Divs und das ist nicht gut. (auch Marge). Nie tun;)

Beispiel mit 4 divs: (mit innerer div)
HTML:

<!-- Testimonials Section --> 
<section id="testimonials" class="testimonials-section"> 
    <div class="container testimonials-container center-block"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="">Testimonials</h1> 
     <div class="col-lg-12"> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 1 
      </div> 
      </div> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 2 
      </div> 
      </div> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 3 
      </div> 
      </div> 
      <div class="col-lg-3 testimonials"> 
      <div> 
       Review 4 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section>

CSS:

.container.testimonials-container { 
    margin: 0 50px 0 50px; 
    width: auto; 
} 

.testimonials div { 
    height: 500px; 
    background: #E5E4DF; 
    padding: 25px; 
    margin: 50px 25px 50px 25px; 
} 

.testimonials-section { 
    background: #F6F6F6; 
    height: 100%; 
    padding-top: 40px; 
    text-align: center; 
}

Fiddle

Quelle

2016-10-30 20:44:19

Danke für die Hilfe! – raimond

np, vergessen Sie nicht, als Antwort zu markieren, wenn es Ihnen geholfen hat. –

-1

.testimonials-section { 
 
    background: #F6F6F6; 
 
    height: 100%; 
 
    padding-top: 40px; 
 
    text-align: center; 
 
} 
 

 

 

 
.testimonials { 
 
\t background: #FFFFFF; 
 
\t 
 

 
} 
 

 
.testimonials_content{ 
 
\t width: 95%; 
 
\t margin: 0 auto; 
 
\t border: thin black solid; 
 
\t height: 500px; 
 
\t background: #F5F5F5; 
 
\t padding: 25px; 
 
\t text-align: center; 
 
\t font-size: 16px; 
 

 
}

<section id="testimonials"> 
 
\t   <div class="container testimonials-container"> 
 
\t    <div class="row"> 
 
\t    \t <h1>Tetimonials</h1> 
 
\t    
 
\t       \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 1 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 2 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 3 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t <div class="col-lg-3 testimonials"> 
 
\t       \t <div class="testimonials_content"> 
 
\t \t      \t \t Review 4 
 
\t \t      \t </div> 
 
\t \t      \t </div> 
 
\t \t      \t 
 
\t    </div></div> 
 
\t  </section>

Sie nicht 4 Abschnitte passen in lg-6 dafür müssen Sie lg-3 nehmen. und darunter können Sie div nehmen, indem Sie margin oder width nach Ihrem Bedarf geben.

hoffe das hilft.

Quelle

2016-10-30 20:49:31

Verwenden Sie den folgenden Code ein:

.col-lg-6.testimonials { 
    background: #E5E4DF; 
    height: 500px; 
    padding: 25px; 
    width: 300px; 
    margin: 50px 25px 50px 25px; 
    display: inline-block; 
    float: none; 
}

Quelle

2016-10-30 21:03:21

So zentrieren Sie Spalten, die in einer Spalte verschachtelt sind

Antwort

Verwandte Themen