jest źle, aby kolumny bootstrap3 zawierały mniej niż 12? (lub, zrozumienie -offset)

Question

Skrócona wersja: czy col-x-offset-n jest zastosowany tylko po lewej stronie, czy ma zastosowanie do lewej i prawej strony, jeśli jest to potrzebne do zrobienia 12? Na przykład czy mogę po prostu zrobić "col-x-10 col-x-offset-1", aby uzyskać 10-kolumnowy kontener z 1 dodatkową kolumną po lewej i prawej stronie? Wydaje się działać, ale nie jest to zgodne z dokumentacją.

Dłuższa wersja: Jako przykład, próbuję wyśrodkować div za pomocą systemu siatki bootstrap 3. Przy rozmiarze col-xs chcę, aby był on pełnej szerokości, ale powyżej tego chcę, aby był wycentrowany z nieco większym wypełnieniem po każdej stronie. Wszystkie docs oczywiście powiedzieć, że liczba kolumn powinna wynieść 12. Tak więc jeśli robię:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-1"> 
     </div> 
     <div class="col-sm-10"> 
      ...content here... 
     </div> 
     <div class="col-sm-1"> 
     </div> 
    </div> 
</div> 

działa jak oczekuję z dwóch pustych kol-sm-1 kolumny działając jak obicia na lewo i prawo. Ale mogę to zrobić z mniejszym użyciem znaczników -offset:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     ...content here... 
     </div> 
     <div class="col-sm-1"> 
     </div> 
    </div> 
</div> 

Jak docs bootstrapowych powiedzieć. „Przenieś kolumny w prawo używając .col-MD-offset * klas Klasy te zwiększają lewy margines kolumny według * kolumn. " Tak więc w tym przypadku mam 10 kolumn, plus 1 kolumnę w offsecie, plus 1 kolumnę w następującym pustym col-sm-1 div, równym 12 kolumnom.

Teraz na pytanie: jeśli wyjmę ostatni pusty element col-sm-1, nadal otrzymuję ten sam wynik (strona jest wyśrodkowana, jak w obu przykładach wcześniej), ale moje kolumny mają teraz wartość tylko 11.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     ...content here... 
     </div> 
    </div> 
</div> 

Czy to jest w porządku? Czy Bootstrap właśnie wypełnia moją ostatnią kolumnę? Chciałbym go upuścić i użyć tylko "col-sm-10 col-sm-offset-1" lub "col-sm-8 col-sm-offset-2" lub "col-sm-6 col-sm- offset-3 "(nawet jeśli te sumują się tylko do 11,10 i 9 kolumn łącznie), ale czy to naprawdę jest sposób, aby to zrobić, czy jest to tylko dziwactwo, że działa dobrze? Wygląda na to, że bootstrap stosuje przesunięcie w lewo, jeśli trzeba, ale nie mogę znaleźć żadnej dokumentacji, aby to potwierdzić.

(A może z tym prostym przykładem jest łatwiejszy sposób na wykonanie tego, co opisuję tutaj, ale staram się zrozumieć, jak działa funkcja -offset, a nie po prostu wyśrodkować prosty element div z marginesem: 0 auto lub coś tak)

Answer 1

w bootstrap dokumentacji one przykłady, które nie sumują się do 12.

To powinno być dopuszczalne.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     ...content here... 
     </div> 
    </div> 
</div> 

dla porównania http://getbootstrap.com/css/#grid przejść do „kolumn kompensujących” rozdział i ostatnie e xample dodaje do 9 i jest podobnym centralnym przykładem.

<div class="row"> 
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
</div>