Wyśrodkuj kolumnę za pomocą Twitter Bootstrap 3

1146

Jak wyśrodkować div o rozmiarze jednej kolumny w kontenerze (12 kolumn) w programie Bootstrap 3 na Twitterze ?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>
Rozwiń fragment kodu

Chcę div, .centeredaby klasa była wyśrodkowana w kontenerze. Mogę użyć wiersza, jeśli jest wiele divs, ale na razie chcę tylko divz wielkością jednej kolumny wyśrodkowanej w kontenerze (12 kolumn).

Nie jestem również pewien, czy powyższe podejście jest wystarczająco dobre, ponieważ nie zamierzamy zrównoważyć tego divo połowę. Nie potrzebuję wolnych przestrzeni na zewnątrz divi zawartości divskurczu w proporcji. Chcę, aby puste miejsce poza div było równomiernie rozmieszczone (zmniejszaj się, aż szerokość kontenera będzie równa jednej kolumnie).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
źródło

Odpowiedzi:

1963

Istnieją dwa podejścia do centrowania kolumny <div>w Bootstrap 3:

Podejście 1 (przesunięcia):

Pierwsze podejście wykorzystuje własne klasy przesunięcia Bootstrap, więc nie wymaga zmiany znaczników i dodatkowego CSS. Kluczem jest ustawienie przesunięcia równego połowie pozostałego rozmiaru wiersza . Na przykład kolumna o rozmiarze 2 byłaby wyśrodkowana przez dodanie przesunięcia o wartości 5, to znaczy (12-2)/2.

W znacznikach wyglądałoby to tak:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Teraz ta metoda ma oczywistą wadę. To działa tylko na nawet wielkości kolumn , tak tylko .col-X-2, .col-X-4, col-X-6, col-X-8, i col-X-10są obsługiwane.

Podejście 2 (stare margin:auto)

Możesz wyśrodkować dowolny rozmiar kolumny za pomocą sprawdzonej margin: 0 auto;techniki. Musisz tylko zadbać o pływanie, które dodaje system siatki Bootstrap. Zalecam zdefiniowanie niestandardowej klasy CSS, takiej jak:

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

Teraz możesz dodać go do dowolnego rozmiaru kolumny przy dowolnym rozmiarze ekranu i będzie on działał bezproblemowo z responsywnym układem Bootstrap:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Uwaga: Za pomocą obu technik można pominąć .rowelement i wyśrodkować kolumnę w środku .container, ale można zauważyć minimalną różnicę w rzeczywistym rozmiarze kolumny z powodu wypełnienia w klasie kontenera.

Aktualizacja:

Ponieważ v3.0.1 Bootstrap ma wbudowaną klasę o nazwie, center-blockktóra używa margin: 0 auto, ale jej brakuje float:none, możesz ją dodać do swojego CSS, aby działał z systemem grid.

— koala_dev
źródło
1
myślę, że nie ma pływaka: brak w regule bloku centralnego, ponieważ istnieje niezależna od clearfix reguła, którą można dodać do elementów w celu wyczyszczenia pływaków.
— Diego Fernando Murillo Valenci
7
@DiegoFernandoMurilloValenci .clearfixnie działałby w tym przypadku, ponieważ nie usuwa właściwości float na elementach (które są potrzebne do wyśrodkowania za pomocą margin: 0 auto), po prostu sprawia, że ​​pojemnik zawija wszelkie pływające elementy wewnątrz
— koala_dev
4
nie można tego użyć w kolumnie, ponieważ nofloat:none;
— airtonix
2
Jeśli chcesz wyśrodkować więcej niż jedną kolumnę w jednym wierszu, zobacz tę odpowiedź stackoverflow.com/questions/28683329/…
— Conor Svensson
3
Składnia przesunięcia została zmieniona w Bootstrap4 (od najnowszej wersji). Wykorzystując tę ​​odpowiedź jako przykład: klasa col-md-offset-5 powinna teraz mieć wartość offset-md-5.
— lgants
296

Preferowaną metodą centrowania kolumny jest użycie „przesunięcia” (czyli: col-md-offset-3)

Przykłady centrowania Bootstrap 3.x.

Dla elementów centrujących istnieje center-block klasa pomocnicza .

Możesz także użyć text-centerdo wyśrodkowania tekstu (i elementów wstawianych).

Demo : http://bootply.com/91632

EDYCJA - jak wspomniano w komentarzach,center-blockdziała na zawartość kolumny idisplay:blockelementy, ale nie działa na samej kolumnie (col-*div), ponieważ używa Bootstrapfloat.

Aktualizacja 2018

Teraz z Bootstrap 4 , gdy centrujące metody zmieniły ..

  • text-centerjest nadal używany do display:inlineelementów
  • mx-autozastępuje elementy center-blockśrodkowedisplay:block
  • offset-* lub mx-auto może być użyty do wyśrodkowania kolumn siatki

mx-auto(marginesy automatycznego oś x) będzie koncentrować display:blocklub display:flexelementów, które mają określoną szerokość , ( %, vw, pxitp ..). Flexbox jest domyślnie używany w kolumnach siatki, więc istnieją również różne metody centrowania Flexbox.

Demo Bootstrap 4 Poziome centrowanie

Centrowanie pionowe w BS4 patrz https://stackoverflow.com/a/41464397/171456

— Zim
źródło
31
Niestety ta klasa pomocnicza nie działa z systemem kolumn, ponieważ nie dba o właściwość float. Zobacz na przykład to demo .
— koala_dev,
13
Wymaga to tylko środkowego bloku {float: none; } i działa. bootply.com/122268
— Matias Vad
5
nie jestem pewien co do OP, ale przybyłem tutaj, szukając text-centerszczegółów - czego nie dostarczyła żadna inna odpowiedź. Ten dostaje mój głos.
— domoarigato
1
nie można tego użyć w kolumnie, ponieważ nofloat:none;
— airtonix
98

Teraz Bootstrap 3.1.1 współpracuje .center-block, a ta klasa pomocnicza działa z systemem kolumn.

Bootstrap 3 Centrum klasy pomocników .

Proszę sprawdzić to jsfiddle DEMO :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Centrum klas pomocniczych

Centrum kolumny wiersza za pomocą col-center-blockklasy pomocniczej.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— Nadawca
źródło
Pracowałem bez dodawania float:none, upewniając się, że środkowy blok div ma style="width : ?px"zastosowany styl. Na przykład szerokość obrazu. Współpracuje z 3.2.2
— Piotr Kula
margines: 0 auto; - wystarczy zamiast marginesu lewy + margines prawy
— mmike
57

Po prostu dodaj następujące elementy do niestandardowego pliku CSS. Bezpośrednia edycja plików Bootstrap CSS nie jest zalecana i anuluje możliwość korzystania z CDN .

.center-block {
    float: none !important
}

Dlaczego?

Bootstrap CSS (wersja 3.7 i niższe) używa marginesu: 0 auto; , ale zostaje zastąpione przez właściwość float kontenera wielkości.

PS :

Po dodaniu tej klasy nie zapomnij ustawić klas we właściwej kolejności.

<div class="col-md-6 center-block">Example</div>
— Sagive SEO
źródło
1
Używam Bootstrap 3.3.7i jest to jedyna metoda, która działa dla mnie!
— illagrenan
1
to działa. ale nie sądzę, że !importantjest to konieczne
— Gianfranco P.
1
@GianfrancoP. P. Masz rację, ale ... to zależy od kolejności ładowania i chciałem zapewnić niezawodną metodę.
— Sagive SEO
39

Bootstrap 3 ma teraz wbudowaną klasę do tego.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Jeśli nadal używasz 2.X, po prostu dodaj to do swojego CSS.

— Schmalzy
źródło
prawdopodobnie najłatwiej dałoby to pożądany efekt. Rzuć też szerokość na klasę .centered lub dodaj drugą klasę, jeśli wybierasz podejście bardziej modułowe
— Matt Lambert
2
Dodanie liczby zmiennoprzecinkowej: brak; na .centered pozwala przenieść klasę do kontenera. utrzymuje kod w czystości
— Adam Patterson
7
nie można tego użyć w kolumnie, ponieważ nofloat:none;
— airtonix
37

Moje podejście do środkowych kolumn polega na użyciu display: inline-blockkolumn i text-align: centerelementu nadrzędnego kontenera.

Musisz tylko dodać klasę CSS „wyśrodkowaną” do row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

— Steffi
źródło
2
To jedyna odpowiedź, która działała przez 100% czasu - pozostałe działały, ale nie wtedy, gdy bootstrap przełączył się na widok mobilny (elementy zostały przeniesione na lewą stronę).
— Levi Fuller,
To był jedyny, który mnie również zadziałał, .center-block działa tylko na jedną kolumnę i muszę wyśrodkować wszystkie kolumny niezależnie od ich liczby.
— cjohansson,
Jedyne rozwiązanie, które dla mnie zadziałało. Inne działały tylko wtedy, gdy przeglądarka była oknem (nie na pełnym ekranie).
— kiwicomb123
26

Bootstrap w wersji 3 ma klasę .text-center.

Po prostu dodaj tę klasę:

text-center

Po prostu załaduje ten styl:

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

Przykład:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
— RustyIngles
źródło
Wyjaśnij, gdzie ta klasa zostanie dodana?
— aksu
Cześć @aksu, nie musisz dodawać żadnych plików .css. Spójrz na podany przykład.
— JoshYates1980,
15

To działa. Cholera prawdopodobnie, ale działa dobrze. Został przetestowany pod kątem responsywności (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Pulpit

Czuły

— Ali Gajani
źródło
działa tylko dlatego, że element ma wstawkę diplay. imgMoże być ustawiona jako blok.
— ProfileTwist
Być może w twoim izolowanym przypadku testowym. Dodałbym .centered img { display: inline; }do twojej odpowiedzi, a wtedy byłoby warte większego głosowania.
— ProfileTwist
Nie ma problemu. Jestem pewien, że OP znajdzie swoją odpowiedź :)
— Ali Gajani,
w bootstrap 3 klasa .text-center robi to samo, jak się dowiedziałem powyżej.
— domoarigato
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— Wali
źródło
6

Aby wyśrodkować kolumnę, musimy użyć poniższego kodu. cols są elementami zmiennoprzecinkowymi oprócz auto marginesu. Ustawimy go również na brak zmiennoprzecinkowy,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Aby wyśrodkować powyższą kolumnę-lg-1 klasą środka, napiszemy:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Aby wyśrodkować zawartość wewnątrz div, użyj text-align:center,

.centered {
    text-align: center;
}

Jeśli chcesz wyśrodkować go tylko na pulpicie i na większym ekranie, a nie na telefonie komórkowym, użyj następującego zapytania o media.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Aby wyśrodkować div tylko na wersji mobilnej, użyj poniższego kodu.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
— Aamer Shahzad
źródło
6

Po prostu ustaw jedną kolumnę wyświetlającą treść na col-xs-12 (najpierw na urządzeniu mobilnym ;-) i skonfiguruj tylko kontener, aby kontrolować, jak szeroka ma być wyśrodkowana zawartość, więc:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Rozwiń fragment kodu

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
Rozwiń fragment kodu

Aby zobaczyć demo, zobacz http://codepen.io/Kebten/pen/gpRNMe :-)

— Kieran Ryan
źródło
6

Innym podejściem do kompensacji jest posiadanie dwóch pustych wierszy, na przykład:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— LeRoy
źródło
1
2 bezużyteczne divy, col-md-offset- * jest lepszy
— ymakux
1
Zgadzam się. Użyłem tej metody, ponieważ faktycznie działa ona dobrze i przetestowana.
— LeRoy,
6

Możesz użyć text-centerdla wiersza i upewnić się, że wewnętrzne div mają display:inline-block(z nie float).

Tak jak:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

I CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Skrzypce: http://jsfiddle.net/DTcHh/3177/

— Alireza Fattahi
źródło
6

Z bootstrap 4 możesz po prostu spróbować, justify-content-md-centerjak tu wspomniano

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

wprowadź opis zdjęcia tutaj

— Hossein Narimani Rad
źródło
1
@AdamErickson Pytanie zadane specjalnie dla rozwiązania bootstrap 3. Ponieważ ta odpowiedź jest prawdopodobnie najlepszym rozwiązaniem w BS4, w 2019 r. Niektóre programy nadal używają bootstrap 3.
— A1rPun
5

Prawdopodobnie nie jest to najlepsza odpowiedź, ale istnieje jeszcze jedno twórcze rozwiązanie tego problemu. Jak wskazał koala_dev, kompensacja kolumn działa tylko dla parzystych rozmiarów kolumn. Jednak poprzez zagnieżdżanie wierszy można również centrować nierówne kolumny.

Aby trzymać się pierwotnego pytania, w którym chcesz wyśrodkować kolumnę 1 w siatce 12.

  1. Wyśrodkuj kolumnę 2, przesuwając ją 5
  2. Utwórz zagnieżdżony wiersz, aby uzyskać nowe 12 kolumn w swoich 2 kolumnach.
  3. Ponieważ chcesz wyśrodkować kolumnę 1, a 1 to „połowa” 2 (co wyśrodkowaliśmy w kroku 1), musisz teraz wyśrodkować kolumnę 6 w zagnieżdżonym rzędzie, co można łatwo zrobić, przesuwając ją 3.

Na przykład:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Zobacz to skrzypce , pamiętaj, że musisz zwiększyć rozmiar okna wyjściowego, aby również zobaczyć wynik, w przeciwnym razie kolumny się zawiną.

— reinder
źródło
5

To nie jest mój kod, ale działa idealnie (testowany na Bootstrap 3) i nie muszę się bawić z offsetem col.

Próbny:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
Rozwiń fragment kodu

— Binar Web
źródło
4

Możemy to osiągnąć za pomocą mechanizmu układu tabeli:

Mechanizm jest następujący:

  1. Zawiń wszystkie kolumny w jeden div.
  2. Zrób ten div jako tabelę o stałym układzie.
  3. Ustaw każdą kolumnę jako komórkę tabeli.
  4. Użyj właściwości wyrównania do pionu, aby kontrolować pozycję zawartości.

Przykładowe demo jest tutaj

Wpisz opis zdjęcia tutaj

— Mohan Dere
źródło
4

Dołącz następujący fragment kodu do pliku .row lub .col. To jest dla Bootstrap 4 *.

d-flex justify-content-center
— Thomas Chirwa
źródło
3

Jak koala_dev używał w swoim podejściu 1, wolałbym metodę offsetową zamiast bloku środkowego lub marginesów, które mają ograniczone użycie, ale jak wspomniał:

Ta metoda ma oczywistą wadę, działa tylko dla parzystych rozmiarów kolumn, więc tylko .col-X-2, .col-X-4, col-X-6, col-X-8 i col-X- Obsługiwanych jest 10.

Można to rozwiązać, stosując następujące podejście do nieparzystych kolumn.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— Abhinav Singh
źródło
3

Możesz użyć bardzo elastycznego rozwiązania flexbox do Bootstrap.

justify-content: center;

może wyśrodkować kolumnę.

Sprawdź flex .

— Szorstki
źródło
2

Ponieważ nigdy nie muszę wyśrodkowywać tylko jednego .col-w ciągu .row, ustawiam następującą klasę na zawijanie .rowmoich docelowych kolumn.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Przykład

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— Walter Roman
źródło
2

Dla tych, którzy chcą wyśrodkować elementy kolumny na ekranie, gdy nie masz dokładnej liczby do wypełnienia siatki, napisałem mały fragment kodu JavaScript, aby zwrócić nazwy klas:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Jeśli masz 5 elementów i chcesz mieć 3 na wiersz na mdekranie, wykonaj następujące czynności:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Pamiętaj, że drugi argument musi być podzielny przez 12.

— jsgoupil
źródło
2

Aby wyśrodkować więcej niż jedną kolumnę w wierszu Bootstrap - a liczba kolumn jest nieparzysta, po prostu dodaj tę cssklasę do wszystkich kolumn w tym wierszu:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Więc w swoim HTML masz coś takiego:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— Ruto Collins
źródło
2

Spróbuj tego

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Możesz użyć innych, coljak col-md-2itp.

— Ch UmarJamil
źródło
2

Proponuję po prostu użyć klasy text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— Dadhich Sourav
źródło
2

Wypróbuj ten kod.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Tutaj użyłem col-lg-1, a przesunięcie powinno wynosić 10 dla poprawnie wyśrodkowanego div na dużych urządzeniach. Jeśli potrzebujesz, aby wyśrodkować go na średnich i dużych urządzeniach, po prostu zmień lg na md i tak dalej.

— Bangash
źródło
2

Rozwiązanie Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— JanBrus
źródło
1

Jeśli umieścisz to w swoim rzędzie, wszystkie kolumny w środku zostaną wyśrodkowane:

.row-centered {
    display: flex;
    justify-content: space-between;
}
— Eran Shabi
źródło
spowodował, że element nie reaguje.
— gfivehost
1

Aby być bardziej precyzyjnym, system siatki Bootstrap zawiera 12 kolumn, a aby wyśrodkować dowolną zawartość, powiedzmy, na przykład, zawartość zajmuje jedną kolumnę. Trzeba będzie zająć dwie kolumny siatki Bootstrap i umieścić zawartość na połowie dwóch zajętych kolumn.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

„col-xs-offset-5” mówi systemowi siatki, od czego zacząć umieszczać zawartość.

„col-xs-2” mówi systemowi siatki, ile pozostałych kolumn powinno zająć zawartość.

„wyśrodkowany” będzie zdefiniowaną klasą, która będzie centrować treść.

Oto jak wygląda ten przykład w systemie siatki Bootstrap.

Kolumny:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... offset ........ dane. .......nieużywany........

— Tech
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.