2012-05-24 12 views
11

私はログイン画面をレイアウトしています。その画面では、LOGINとPASSWORDのボックスになります。私は(従来のログイン画面のように)縦横に集中する必要があります。Twitterのブートストラップにボックスを置く方法

Twitterのブートストラップでどうすればいいですか?

ありがとうございます!

答えて

22

ブートストラップグリッドを使用している場合は、あなたの列を相殺することができます

<div class="row"> 
    <div class="span6 offset3"> 
    Your content goes here 
    </div> 
</div> 

は、ここで例を参照してください:http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

それとも、ただ、単に中央ブロック要素に

div.login-box{ 
    margin:0 auto; 
    width: 720px; 
} 
をCSSを使用することができますが
+0

しかし、あなたはあなたの第二のアプローチで応答性の動作を実現することはできますか? – dennisbot

+0

様々な解像度のさまざまな幅を設定するために、さまざまなCSSメディアクエリを使用できます。あるいは、幅のパーセンテージを試してみることもできます。 70% – Johny

+0

最初のオプションがオフセット(本当にセンタリングされていない)で、2番目のオプションがブートストラップを使用していないので、これは質問に答えないと思います。 – felwithe

0

への更新Johny's answer:ブートストラップ3の場合。構文は少し異なります。

<div class="row"> 
    <div class="col-sm-6 col-sm-offset-3"> 
     Your content goes here 
    </div> 
</div> 

か:いっそのこと:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-sm-offset-3"> 
      Your content goes here 
     </div> 
    </div> 
</div> 
関連する問題