Bootstrap: Centering col-md-5?

Question

Mam wrażenie, że jest to bardzo dziwne pytanie, ale nie mogłem znaleźć rozwiązania w Internecie. Jeśli mam col-md-5, nie mogę tego wyśrodkować. O ile zrozumiałem system siatki, jeśli wybiorę rozmiar kolumny (1-12), w celu kontrolowania pozycji kolumny używam col - ## - offset- #.

Więc jeśli mam col-md-4, użyłbym col-md-offset-4, aby przesunąć go 4 kolumny od lewej, a następnie zostanie wyśrodkowany. Chodzi o to, że aby wyśrodkować kolumnę, musi być taka sama ilość kolumn w siatce po lewej stronie i po prawej stronie.

Co, jeśli mam, powiedzmy, col-md-5? Jak mogę go wyśrodkować? Wykonanie czegoś podobnego do col-md-4 spowoduje opuszczenie 3 z prawej strony. Próbowałem kilku rzeczy, ale bez powodzenia.

Z góry dziękuję.

Answer 1

Cóż można spróbować tego

.col-centered { 
display:inline-block; 
float:none; 
} 

A oto html dla tego

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

To tylko ogólny pomysł niego, ale tutaj jest example znalazłem w Internecie.

Answer 2

Usługa bootstrap na Twitterze stosuje właściwość float w kolumnach col-*-#. Najpierw musimy to zmienić, ustawiając ponownie float na none dla konkretnej kolumny.

Następnie można nadać kolumnie A margin-left/right z auto celu dostosowania go do centrum poziomo - Example Here.

@media (min-width: 992px) { 
    .col-md-center { 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
    } 
} 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-5 col-md-center"> 
    <!--     ^-- Added class name 
    --> ... 
    </div> 
    </div> 
</div> 

Answer 3

Najprościej jest zrobić własną regułę dla tego stworzenia 4,5 offset.

lewy margines = (100/12) * (12-5)/2 = 29,175%

.col-xs-5 { 
 
    background-color: red; 
 
} 
 
.col-xs-offset-4_5 { 
 
    margin-left: 29.175%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-xs-5 col-xs-offset-4_5">.col-xs-5</div> 
 
    </div> 
 
    </div> 
 
</div>

Albo można iść tą drogą, wykorzystują kolumna 6, ale usunąć 1 kolumnę dodając halv kolumnę wyściełanie z każdej strony.

.col-xs-6.morepadding { 
 
    padding: 0px 4.16%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-3 morepadding">.col-xs-6 with half the width of a column as padding on each side</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

spróbuj dodać klasę text-center tak:

<div class="row"> 
<div class="col-md-12 text-center"> 
BLABLA 
</div> 
</div> 

Rozwiązanie współpracuje z Col-MD-5 zbyt

Answer 5

Wystarczy popatrzeć na tym stanowisku i na górze odpowiedź: Center a column using Twitter Bootstrap 3

Konkretnie "Podejście # 2", myślę, że jest to, czego szukasz

Fiddle: http://jsfiddle.net/85oy836u/1/

<div class="container"> 
<div class="row text-center"> 
    <div class="col-xs-5" style="float: none; margin: 0 auto; background: green;">col-xs-5</div> 
</div> 
    </div> 

Answer 6

<div class="col-md-10 col-md-offset-1"> 
    <div class="col-md-6 col-md-offset-3"> 
    </div> 
</div>