Jak wyrównać przycisk do środka za pomocą Bootstrap

Question

Utworzyłem kafelek za pomocą Bootstrap. Wewnątrz płytki, blisko do dołu, chcę trzy przyciski (początek, środek i koniec) płytki.

Wykonałem przyciski początkowe i końcowe, ale używając dwóch tagów div z klasami pull-left i pull-right. Teraz chcę umieścić środkowy przycisk.

Oto część mojego kodu i zrzut ekranu:

<div class="col-lg-12"> 
    <div class="pull-left"> 
     <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
    </div> 

    <!-- I want another button here, center to the tile--> 

    <div class="pull-right"> 
     <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button> 
    </div> 
</div> 

Answer 1

Jeden najbardziej zaawansowanych funkcji Bootstrap jest zagnieżdżanie row elementy. Każdy col-* pojemnik może mieć inny row wewnątrz niej, które następnie dostarcza kolejny komplet 12 col przestrzeniach:

<div class="col-lg-12"> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Middle Button</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Decline</button> 
     </div> 
    </div> 
</div> 

Nie jestem pewien, w jaki sposób zajęcia pull-* dokładnie działa, ale przy użyciu Bootstrap wbudowanego systemu sieciowego Państwo powinno być w stanie się ich pozbyć.

Nie przegap numeru Bootstrap guide on nesting columns, ponieważ zapewnia on więcej informacji niż ta odpowiedź.

Answer 2

Używasz bootstrapu, jak sądzę, więc najlepiej będzie, jeśli wykorzystasz jego system sieciowy.

Utwórz element div z klasą o nazwie row i podziel dzieci z tego rodzica div na żądaną zawartość.

Sposób działania tego podziału polega na tym, że liczba za col- [rozmiar] decyduje o tym, ile miejsca zajmie przestrzeń pozioma. W końcu musi dodać do 12, więc w twoim przypadku chcemy trzech części, które mają rozmiar 4 każdy.

Na przykład:

<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 

Następnie wystarczy umieścić przyciski wewnątrz z Col-XS-4 div i jesteś gotowa do pracy.

Answer 3

Opcja ta:

<div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>