Centrovanie citlivej webovej stránky pomocou bootstrap - css, twitter-bootstrap

Chcem mať na svojej webovej stránke obsah s ľavým a pravým okrajom. Typ veci, ktorú získate z kódu:

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

Používam však zavádzací systém Twitter a stále chcem, aby web zostal responzívny, a zdá sa, že vyššie uvedené narušuje rozloženie mriežky.

Môže mi niekto poradiť o správnom spôsobe, ako to urobiť?

odpovede:

0 pre odpoveď č. 1

Nepoužil som twitter, ale štandardný spôsob centrovania objektu v html pomocou css s okrajmi je nasledujúci:

.container { šírka: 90%; okraj: 0 auto 0 auto; }

Ktoré by mali mať rovnaké výsledky ako:

.container { šírka: 90%; marža: 0,5% 0 5%; }

a:

.container { šírka: 90%; ľavý okraj: 5%; zľava: 5%; }

---

0 pre odpoveď č. 2

Použitie span12, ako je uvedené v dokumentácia tekutej mriežky, pretože koreňový kontajner by to vyriešil po vybalení z krabice, bez narušenia zabudovanej citlivosti.

Niečo také - http://jsbin.com/amovub/5/edit

EDIT: Aktualizoval JSBin vyššie, aby sa pokúsil vyriešiť komentár uvedený nižšie. Podstata je:

CSS:

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

HTML:

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

<!-- your content -->

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

---

0 pre odpoveď č. 3

Táto stránka je jednou z príkladov stránok Bootstrap, ktoré tiež reagujú:

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

Ak túto stránku Firebug zobrazíte, uvidíte, že hlavná trieda kontajnera jednoducho používa:

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

---