0

twitter-bootstrap のようなグリッド システムを使用して、サイトを含むサイト ラップ div にボーダーとパディングを適用する最良の方法は何ですか?

たとえば、ブートストラップを使用すると、グリッドはネストされたコンテナーと行内にあることに依存します。最初のコンテナに境界線とパディングを適用すると、数学が変更され、そこに含まれる div が垂直方向に積み重ねられます - グリッドが壊れます。

最初のコンテナーを別のラップ div に配置し、境界線とパディングをラップ div に適用しても機能しません。含まれている div がコンテナーから抜け出します。

マークアップの例は次のとおりです。

<div class=' main'>
    <div class='container'>
      <div class='row'>
        <div class='span12'>              
            <h1>Demo</h1>    
            <div class='row'>
              <section class='span8'>
                blah blah
              </section>
              <aside class='row'>
                links n stuff
              </aside>    
             </div>
         </div>
      </div>
</div>

20 px のパディング、1 px の境界線をメイン ラッパーに適用したいと考えています。Bootstrap は、スパンの幅を px 単位で計算するため、それらは分割されます。

4

1 に答える 1

0

したがって、px 幅ではなく、% 幅が必要です。他のフレームワークは % を使用します。おー。ブートストラップ流体は % を使用します

<div class=' main'>
<div class='container-fluid'>
  <div class='row-fluid'>
    <div class='span12'>              
        <h1>Demo</h1>    
        <div class='row-fluid'>
          <section class='span8'>
            blah blah
          </section>
          <aside class='span3'>
            links n stuff
          </aside>    
         </div>
     </div>
  </div>
</div>

次に、メディアクエリを使用してコンテナの幅を計算します

.main{
  width:1210px;
  margin:20px auto;

  border-radius:3px;
  border:1px solid #eee;
  box-shadow: 2px 2px 8px rgba(6,6,6,0.5);
}


@media (max-width: 1210px) { 
 .main{
    width:80%;
  }
 }

ブートストラップグリッドの周りのボックスです。わーい。

于 2012-09-07T07:45:08.697 に答える