Центрування адаптивного веб-сайту за допомогою bootstrap - css, twitter-bootstrap

Те, що я хочу мати, - це вміст по центру з лівою та правою рамкою на моєму веб-сайті. Тип речі, яку ви отримуєте від коду:

.container {
width: 90%;
margin: 0 auto;
}

Однак я використовую завантажувальний засіб щебетати і все ще хочу підтримувати веб-сайт чуйним, а виконання вищезазначеного, здається, порушує макет сітки.

Хто-небудь може порадити мені правильний шлях для цього?

Відповіді:

0 для відповіді № 1

Я не використовував twitter, але стандартний метод центрування об'єкта в html за допомогою css з полями такий:

.контейнер { ширина: 90%; маржа: 0 авто 0 авто; }

Що повинно дати ті самі результати, що і:

.контейнер { ширина: 90%; маржа: 0 5% 0 5%; }

і:

.контейнер { ширина: 90%; маржа-ліва: 5%; маржа-права: 5%; }

---

0 для відповіді № 2

Використовуючи span12, як зазначено в документація з рідинної сітки, оскільки кореневий контейнер вирішив би його з коробки, не порушуючи вбудованої чутливості.

Щось на зразок цього - http://jsbin.com/amovub/5/edit

EDIT: Оновлено JSBin вище, щоб спробувати звернутися до коментаря нижче. Суть така:

CSS:

.centeredContent{
width: 90%;
margin: 0 auto;
}

HTML:

<div class="span12">
<div class="centeredContent">

<!-- your content -->

</div> <!-- /centeredContent -->
</div> <!-- /span12 -->

---

0 для відповіді № 3

Ця сторінка - одна із прикладних сторінок Bootstrap, яка також чуйно реагує:

http://twitter.github.com/bootstrap/examples/hero.html

Якщо ви Firebug на цій сторінці, ви побачите, що основний клас "контейнер" просто використовує:

.container {
margin-left: auto;
margin-right: auto;
}

---