Bootstrap wyśrodkowuje wszystkie kolumny w całym wierszu.

Question

Aktualnie tworzę stronę internetową z Bootstrap i używam kolumn. Moja strona wygląda tak:

Chciałbym centrum ostatnią kolumnę (w drugim rzędzie), ale strona jest dynamiczna i nie wiem ile pojemników istnieją.

Znalazłem dwa rozwiązania na Google:

1) Dodaj to do mojego CSS:

.col-centered{ 
    float: none; 
    margin: 0 auto; 
} 

2) Dodaj do tego atrybutu tag klasa

col-lg-offset-4 

Ale oba rozwiązania wyglądać następująco:

To nie jest to, co chcę. Chcę, żeby wyglądać tak:

W jaki sposób można to osiągnąć?

Answer 1

kolumny Bootstrap są pływające domyślnie z css float nieruchomości. Z float nie możemy wyśrodkować kolumn. Jednak z display: inline-block możemy. Wszystko, czego potrzebujemy, to usunąć float ze stylów kolumn i zmienić je na inline-block z vertical-align: middle, a dostaniesz to, co chcesz. Ale nie zapomnij usunąć dodatkowej przestrzeni, która jest dołączona do inline-block.

Oto podstęp.

.wrapper { 
 
    background: green; 
 
    padding: 20px 0; 
 
} 
 

 
.box { 
 
    border-radius: 10px; 
 
    margin-bottom: 30px; 
 
    background: #fff; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 
.center-align { 
 
    letter-spacing: -4px; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
.center-align [class*='col-'] { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    letter-spacing: 0; 
 
    font-size: 14px; 
 
    float: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="container center-align"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container center-align"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Uwaga: Ustawienie font-size: 0; odstępy między literami: -4px na rodzica i stosowanie rozmiaru czcionki rodzica: 14px; odstępy między literami: 0 z powrotem na elementach potomnych usuwa białą przestrzeń, która przychodzi z blokiem wiersza.

Answer 2

Musisz dodać ostatni blok tekstu do innego wiersza i zmienić "col-md-4" na "col-md-12".

<div class="row"> 
    <div class="col-md-4"> // column 1 
     bla bla bla 
    </div> 
    <div class="col-md-4"> //column 2 
     bla bla bla 
    </div> 
    <div class="col-md-4"> // column 3 
     bla bla bla 
    </div> 
</div> 
<div class="row"> 
    <center> 
    <div class="col-md-12"> //last column, also note I changed it to 12 
     bla bla bla 
    </div> 
    </center> 
</div> 

Answer 3

Bootstrap posiada wbudowane funkcjonalności do osiągnięcia układ jesteś po, bez wprowadzenia dodatkowych reguł CSS. Po prostu użyj klasy .col-md-offset-*:

Przenieś kolumny w prawo, używając klas .col-md-offset-*. Klasy te zwiększają lewy margines kolumny o * kolumny. Na przykład .col-md-offset-4 przenosi .col-md-4 w czterech kolumnach.

Twój układ będzie w końcu wygląda podobnie do tego:

.show-grid { 
 
    margin-bottom: 15px; 
 
} 
 

 
.your-custom-div { 
 
    height: 50px; 
 
    background-color: green; 
 
    color: white; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row show-grid"> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md"></div> 
 
    </div> 
 
    <div class="row show-grid"> 
 
     <div class="col-md-4 col-md-offset-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 .col-md-offset-4 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
    
 
</html>

EDIT # 1: Dla wymogu nie wiedząc, ile kolumn będzie pobieranie z bazy danych dla w drugim wierszu, inną opcją byłoby użycie warunkowego ciągu wyjściowego HTML, aby wyprowadzić także klasę .col-md-offset-4, jeśli modulo liczby elementów w kolekcji podzielone przez liczbę kolumn jest równe 1 lub ed jak zwykle inaczej. W środowisku ASP.NET z aplikacją Razor wygląda to mniej więcej tak (poniższy przykład jest prosty w celu zademonstrowania proponowanej logiki, może być refaktoryzowany do własnej klasy pomocniczej HTML, uwzględniającej również inne rozmiary kolumn):

@{ 
    bool lastItemShouldBeCentered = Foo.Count % 3 == 1; 
    for (int i = 0; i < Foo.Count; i++) 
    { 
     bool isLastItem = i == Foo.Count - 1; 
     if (isLastItem && lastItemShouldBeCentered) 
     { 
      <div class="col-md-4 col-md-offset-4"> 
       // Foo[i] content here 
      </div> 
     } 
     else 
     {     
      <div class="col-md-4"> 
       // Foo[i] content here 
      </div> 
     } 
    } 
} 

EDIT # 2: Wygląda na to, że źle odczytałem Twoje wymagania. Dla 1 kolumny po lewej stronie rozwiązanie to wystarczy. Aby uzyskać więcej, chciałbym iść z odpowiedzią @ Muhammada.