web-dev-qa-db-ja.com

Twitter Bootstrapフレームワークでパディングはサポートされていますか？

Twittter Bootstrapフレームワークを理解するのに問題があります。コンテナの周りに基本的なパディングが可能ですか？

デフォルトの20pxのマージンが残っているようですが、パディングはありません。ここの誰かがこの問題を解決することができましたか？

http://Twitter.github.com/bootstrap/

これは、背景が白の場合は問題なく機能しますが、コンテナの後ろに色を配置すると、パディングが表示されず、パディングを追加するとレイアウトが壊れます。私は何か間違ったことをしていますか？

twitter-bootstrapgridcss-frameworks
19
Amit Erandole

インスピレーション stackoverflow.com/a/10779289

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}
4
Steven Penny

上記のアプローチを取り、それをパディングに適用することも機能します。

パディングするスパン（この場合はspan4）に.is-paddedというクラスを追加します。

<!-- Example row of columns -->
  <div class="row">
    <div class="span4 is-padded">
      <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>

次に、適用されたパディングによってスパンの幅を縮小するCSS（またはそれ以下）を作成します。次に例を示します。

/* CSS example */
.span4.is-padded {
    width: 280px; /* 300 - (10x2) */
    padding: 10px;
    background: #CCC; /* just so you can see it */
}

/* Less example */
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}

これは、グリッドの残りの部分で簡単に繰り返すことができます

.is-padded {
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}
.span1.is-padded {
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth;
}
.span2.is-padded {
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth;
}
.span3.is-padded {
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth;
}
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
}
... etc

レスポンシブグリッドのブレークポイントは、メディアクエリを使用しても簡単に上書きできます。

ただし、このアプローチは流体グリッドでは機能しません。

6
Ben Edge

.lessファイルのサイト幅を上書きできます//グリッドシステムとページ構造

つまり、940pxの両側に20pxを追加する場合（20pxはデフォルトのgridGutterWidthです）、コメントアウトします。

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

そして書く：

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

マージン左をキャンセルします：cssルールで-20px：

.row {margin-left: 0;}

ただし、ネストされた行を使用する場合は、インデントする行だけにクラスを追加する必要があります。ルールを作成します。

.indent {margin-left: 0;}

次に<div class="row">クラスを追加する<div class="row indent">

3
alius