Центрирование всего содержимого сайта с помощью Bootstrap

Question

Как мне разместить все содержимое моего сайта с помощью Boostrap (независимо от ширины браузера)? Вот скрипка, которая демонстрирует, как содержание, как правило, слегка наклонять вправо, когда я бы ожидать, что она будет в центре: http://jsfiddle.net/Fqzuu/5/embedded/result/

<div class="container"> 
    <div id="whitespaceOnLeft" class="span2"></div> 
    <div id="allSiteContent" class="span8"> 
     <h1 class="text-center">My Site</h1> 

     <div>I'd like my site's content to all be centered, a common web design paradigm. However, 'container' seems to skew toward the right; using 'container-fluid' seems to skew toward the left. (More obvious when you make your browser narrower.)</div> 
    </div> 

    <div id="whitespaceOnRight" class="span2"></div> 
</div> 

Answer 1

Я боролся с Bootstrap центрирования на некоторое время и никогда не нашел идеальное, реагирующее решения.

Лучшее решение, которое я нашел его, чтобы добавить это мой CSS:

.pull-center{text-align:center;margin:0 auto !important;float:none !important;} 

И затем использовать класс «тянуть-центр» по желанию («контейнер-жидкость» работает лучше):

<div class="container-fluid"> 
    <div id="whitespaceOnLeft" class="span2"></div> 
    <div id="allSiteContent" class="span8 pull-center"> 
     <h1>My Site</h1> 

     <div>I'd like my site's content to all be centered, a common web design paradigm. However, 'container' seems to skew toward the right; using 'container-fluid' seems to skew toward the left. (More obvious when you make your browser narrower.)</div> 
    </div> 

    <div id="whitespaceOnRight" class="span2"></div> 
</div> 

Вот скрипка:

http://jsfiddle.net/skelly/bGFSz/

Я также обнаружил, что Bootstrap теперь предоставляет класс с разбивкой по страницам, но на самом деле он не работает для того, что вы пытаетесь добиться.

Answer 2

Добавить класс.

.center {margin: 0 auto;}