Środkowy nagłówek Bootstrap

93

To moje pierwsze doświadczenie w Twitter Bootstrap. Dodałem kilka nagłówków (h1, h2 itd.) I są one wyrównane do lewej strony. Jaki jest właściwy sposób wyśrodkowania nagłówków?

twitter-bootstrap

— SiberianGuy
źródło

Jak zachowujesz nagłówki? Wewnątrz kontenera, jak pprzywieszka, czy luźne?

— Andres Ilich

@AndresIlich, wewnątrz row-fluide (który znajduje się w pojemniku-fluide)

— SiberianGuy

chcesz wyśrodkować wszystkie nagłówki? czy tylko kilka?

— Andres Ilich

@AndresIlich, chcę, aby wszystkie nagłówki były domyślnie wyśrodkowane

— SiberianGuy

141

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap dodał trzy klasy css do wyrównywania tekstu.

— Jinpu Hu
źródło

69

po prostu użyj class = 'text-center' w elemencie jako środkowy nagłówek.

<h2 class="text-center">sample center heading</h2>

użyj class = 'text-left' w elemencie dla lewego nagłówka i class = 'text-right' w elemencie dla prawego nagłówka.

— Sadegh-khan
źródło

29

Po prostu użyj „justify-content-center” w atrybucie class wiersza.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Jufrench
źródło

2

Po co ta złożoność? Czy nie jest <h1 class="text-center">po prostu prostsze, jak na odpowiedź Sadegh-khan ?

— Marco Sulla

Użycie tego pozwala na scentralizowanie nagłówka w div podczas używania bootstrapu, czego nie robiło użycie text-center. Sprawia, że nagłówek pojawia się na środku ekranu, do czego dążyłem.

— Norman

11

Zgodnie z Twoimi komentarzami, aby wyśrodkować wszystkie nagłówki, wystarczy dodać text-align:centerje wszystkie jednocześnie, na przykład:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— Andres Ilich
źródło

1

Prawdą jest, że idea korzystania z ładowania początkowego na Twitterze polega na maksymalnym wykorzystaniu istniejących klas. Zobacz odpowiedź Jinpu Hu

— Skurpi

Struktury @Skurpi działają jako sugestie dotyczące tego, czego można użyć w projekcie; W żadnym wypadku nie są one dane. Chociaż prostsze jest użycie klas i stylów już podanych w bootstrapie, jeśli wymagania twojego projektu "wymagają" wprowadzenia drastycznych zmian we frameworku, zgodnie z pytaniem OP, najprostszym sposobem jest po prostu zmodyfikowanie tych zmian w poziom główny. W przeciwieństwie do dodawania mnóstwa zajęć, których naprawdę nie potrzebujesz.

— Andres Ilich

@Skurpi Ponadto te klasy wyrównania nie istniały w momencie pisania. Ta odpowiedź ma rok.

— Andres Ilich

Ilich Masz rację, nie spojrzałeś na datę tego pytania, kiedy tu przyjechałem

— Skurpi

5

Bootstrap zawiera wiele gotowych klas, a jedną z nich jest class="text-left". W razie potrzeby proszę dzwonić do tej klasy. :-)

— Tinsae
źródło