Wyśrodkuj kolumnę za pomocą Twitter Bootstrap 3
Jak wyśrodkować div o wielkości jednej kolumny w kontenerze (12 kolumn) w Twitter Bootstrap 3?
.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>
Chcę div
, Z klasą .centered
być wyśrodkowane wewnątrz kontenera. Mogę użyć wiersza, jeśli jest wiele div
s, ale na razie chcę tylko div
z rozmiarem jednej kolumny wyśrodkowanej wewnątrz kontenera (12 kolumn).
Nie jestem również pewien, czy powyższe podejście jest wystarczająco dobre, ponieważ intencją nie jest, aby przesuń div
o połowę. Nie potrzebuję wolnych przestrzeni poza {[2] } i zawartość div
kurczy się proporcjonalnie. Chcę puste miejsce na zewnątrz div, aby było równomiernie rozłożone (kurczyć się, aż szerokość kontenera będzie równa jednej kolumnie).
30 answers
Istnieją dwa podejścia do centrowania Kolumny <div>
w Bootstrap 3:
Podejście 1 (przesunięcia):
Pierwsze podejście wykorzystuje własne klasy offsetowe Bootstrap, więc nie wymaga zmiany znaczników ani 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 offsetu 5, czyli (12-2)/2
.
W znacznikach wyglądałoby to następująco:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Teraz, jest oczywistą wadą tej metody. 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-10
są obsługiwane.
Podejście 2 (Stare margin:auto
)
Możesz wyśrodkować dowolną wielkość kolumny za pomocą sprawdzonej techniki margin: 0 auto;
. Musisz tylko zadbać o pływający, który jest dodawany przez system siatki Bootstrap. Polecam zdefiniowanie niestandardowej klasy CSS w następujący sposób:
.col-centered{
float: none;
margin: 0 auto;
}
Teraz możesz dodać go do Każdy rozmiar kolumny w dowolnym rozmiarze ekranu i będzie działać bezproblemowo z responsywnym układem Bootstrap: {]}
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Uwaga: W Obu technikach można pominąć element .row
i umieścić kolumnę w środku .container
, ale można zauważyć minimalną różnicę w rzeczywistym rozmiarze kolumny ze względu na wypełnienie w klasie kontenera.
Update:
Od wersji 3.0.1 Bootstrap ma wbudowaną klasę o nazwie center-block
, która używa margin: 0 auto
, ale jej brakuje float:none
, możesz dodać go do CSS, aby działał z systemem grid.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-04 15:00:24
Preferowaną metodą centrowania kolumn jest użycie " offsetów "(tj.: col-md-offset-3
)
Bootstrap 3.przykłady centrowania x
Dla elementów centrujących istnieje center-block
Klasa pomocnicza .
Możesz również użyć text-center
do wyśrodkować tekst (i elementy inline).
Responsive Demo: http://bootply.com/91632
edytuj - Jak wspomniano w komentarzach, center-block
działa na zawartość kolumny i elementy display:block
, ale nie będą działać na samej kolumnie (col-*
divs), ponieważ Bootstrap używa float
.
Aktualizacja 2020
Teraz z Bootstrap 4 , metody centrowania zmieniły się..
-
{[2] } jest nadal używany dla
display:inline
elementów -
mx-auto
zastępujecenter-block
do środkadisplay:block
elementy -
offset-*
lubmx-auto
może być używany do wyśrodkowania kolumn siatki
mx-auto
(auto X-axis marginesami) wyśrodkuje display:block
lub display:flex
elementy, które mają zdefiniowaną Szerokość, (%
, vw
, px
, itd..). Flexbox jest używany domyślnie na kolumnach siatki, więc istnieją również różne metody centrowania flexbox.
Demo Bootstrap 4 Poziome Centrowanie
Do centrowania pionowego w BS4 zobacz https://stackoverflow.com/a/41464397/171456
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-26 15:39:59
Teraz Bootstrap 3.1.1 działa z .center-block
, a ta klasa pomocnicza działa z systemem kolumn.
Bootstrap 3 Helper Class Center .
Proszę sprawdzić to DEMO jsfiddle:
<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>
Row column center using col-center-block
helper class.
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-29 11:25:24
Po prostu dodaj następujące elementy do swojego niestandardowego pliku CSS. Nie zaleca się bezpośredniego edytowania plików CSS Bootstrap i anuluje możliwość korzystania z CDN .
.center-block {
float: none !important
}
Dlaczego?
Bootstrap CSS (Wersja 3.7 i niższa) używa margin: 0 auto; , ale jest zastępowany przez właściwość float kontenera size.
PS :
Po dodaniu tej klasy, nie zapomnij ustawić klas według odpowiedniej kolejności.
<div class="col-md-6 center-block">Example</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-04 15:02:44
Bootstrap 3 ma teraz wbudowaną klasę dla tego .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Jeśli nadal używasz 2.X następnie po prostu dodaj to do swojego CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-24 20:24:33
Moje podejście do kolumn środkowych polega na użyciu {[2] } dla kolumn i text-align: center
dla rodzica kontenera.
Wystarczy dodać klasę CSS 'centered' 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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-04 15:06:18
Bootstrap Wersja 3 maKlasa 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-28 16:55:27
Z Bootstrap v4, można to osiągnąć poprzez dodanie .justify-content-center
do.row
<div>
<div class="row justify-content-center">
<div class="col-1">centered 1 column</div>
</div>
Https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-25 02:57:38
To działa. Pewnie w hakerski sposób, ale działa ładnie. Został przetestowany pod kątem responsywności (Y).
.centered {
background-color: teal;
text-align: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-30 16:01:44
Z bootstrap 4 możesz po prostu spróbować justify-content-md-center
, Jak wspomniano tutaj
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-09 15:51:05
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-13 17:46:24
Aby wyśrodkować col - musimy użyć poniższego kodu. cols są elementami pływającymi oprócz margin auto. Ustawimy go również na float none,
<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ższy col-lg-1 z klasą wyśrodkowaną, 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 większym ekranie, a nie na urządzeniach mobilnych, użyj następującego zapytania o media.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
I aby wyśrodkować div tylko w wersji mobilnej, użyj poniżej kod.
@media (max-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-12 22:41:51
Po prostu ustaw jedną kolumnę wyświetlającą zawartość na col-xs-12 (mobile-first; -) i skonfiguruj kontener tylko tak, aby kontrolować, jak szeroka ma być Centralna 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>
<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>
Aby zobaczyć demo, Zobacz http://codepen.io/Kebten/pen/gpRNMe :-)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-30 16:04:26
Innym sposobem 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-30 16:05:22
Możesz użyć text-center
dla wiersza i możesz upewnić się, że wewnętrzne div mają display:inline-block
(z nie float
).
Jako:
<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
}
The fiddle: http://jsfiddle.net/DTcHh/3177/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-04 15:05:32
To prawdopodobnie nie jest najlepsza odpowiedź, ale jest jeszcze jedno twórcze rozwiązanie. Jak zauważył koala_dev, kompensacja kolumn działa tylko dla parzystych rozmiarów kolumn. Jednak dzięki zagnieżdżaniu wierszy można również wyśrodkować nierówne kolumny.
Aby trzymać się pierwotnego pytania, gdzie chcesz wyśrodkować kolumnę 1 wewnątrz siatki 12.
- Wyśrodkuj kolumnę 2 przez przesunięcie jej 5
- Utwórz zagnieżdżony wiersz, aby uzyskać nowe 12 kolumn wewnątrz 2 kolumny.
- ponieważ chcesz wyśrodkować kolumnę 1, A 1 jest "połową" 2( Co wyśrodkowaliśmy w kroku 1), Teraz musisz wyśrodkować kolumnę 6 w zagnieżdżonym wierszu, co można łatwo zrobić, kompensując GO 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>
Patrz ten fiddle , Należy pamiętać, że należy zwiększyć rozmiar okna wyjściowego, aby również zobaczyć wynik, w przeciwnym razie kolumny zostaną zawinięte.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-02 05:35:36
To nie jest mój kod, ale działa idealnie (testowany na Bootstrap 3) i nie muszę zadzierać z col-offsetem.
Demo:
/* 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-22 13:17:18
Dołącz następujący fragment wewnątrz twojego ./ align = "left" / kol. to dla Bootstrap 4*.
d-flex justify-content-center
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-04 15:12:44
Możemy to osiągnąć za pomocą mechanizmu układu tabeli:
Mechanizm jest:
- zawiń wszystkie kolumny w jeden div.
- Stwórz div jako tabelę ze stałym układem.
- Utwórz każdą kolumnę jako komórkę tabeli.
- użyj właściwości vertical-align, aby kontrolować pozycję zawartości.
Przykładowe demo jest tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
Jako że koala_dev użył w swoim podejściu 1, wolałbym metodę offsetową zamiast środkowych bloków lub marginesów, która ma ograniczone zastosowanie, ale jak wspomniał:
Teraz, jest oczywistą wadą tej metody, działa tylko dla równych rozmiarów kolumn, więc tylko .col-X-2,col-X-4, Col-x-6, col-x-8 i col-X-10 są obsługiwane.
Można to rozwiązać za pomocą następującego podejścia dla nieparzystych kolumn.
<div class="col-xs-offset-5 col-xs-2">
<div class="col-xs-offset-3">
// Your content here
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-30 16:06:31
Możesz użyć bardzo elastycznego rozwiązania flexbox do swojego Bootstrap.
justify-content: center;
Może wyśrodkować kolumnę.
Zobacz flex.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-19 18:38:52
Bootstrap 4 rozwiązanie:
<div class="container">
<div class="row">
<div class="col align-self-center">
Column in the middle, variable width
</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-19 11:31:23
Ponieważ nigdy nie muszę wyśrodkowywać tylko jednego .col-
w .row
, ustawiam następującą klasę na zawijaniu .row
moich kolumn docelowych.
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-27 21:41:44
Dla tych, którzy chcą wyśrodkować elementy kolumn na ekranie, gdy nie masz dokładnej liczby do wypełnienia siatki, napisałem mały fragment 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 w wierszu na ekranie md
, Zrób to:
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"]
Należy pamiętać, że drugi argument musi być podzielny przez 12.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-06 21:29:13
Aby wyśrodkować więcej niż jedną kolumnę w wierszu Bootstrap - a liczba kolumn jest nieparzysta, po prostu dodaj tę klasę css
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 Twoim 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-29 13:27:09
Spróbuj tego
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
Możesz używać innych col
jak również col-md-2
, itp.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-13 17:47:44
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-19 18:32:27
Spróbuj tego kodu.
<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 offset powinien wynosić 10 dla prawidłowego wyśrodkowania div na dużych urządzeniach. Jeśli potrzebujesz go, aby skoncentrować się na średnich i dużych urządzeniach, po prostu zmień lg na md i tak dalej.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-04 15:08:38
Jeśli umieścisz to w wierszu, wszystkie kolumny wewnątrz będą wyśrodkowane:
.row-centered {
display: flex;
justify-content: space-between;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-16 19:59:53
Aby być bardziej precyzyjnym system siatki Bootstrap zawiera 12 kolumn i 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 zajmowanych 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 z pozostałych kolumn powinno zawierać zawartość zająć.
'centered' będzie zdefiniowaną klasą, która wyśrodkuje zawartość.
Oto jak ten przykład wygląda w systemie Bootstrap ' a.
Kolumny:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
.......przesunięcie....... .data. .......nieużywany........
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-19 18:34:10