19

Twitter Bootstrap フレームワークを理解できません。コンテナの周りの基本的なパディングは許可されていますか?

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

http://twitter.github.com/bootstrap/

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

4

3 に答える 3

6

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

パディングするスパン（この場合は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

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

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

于 2012-06-14T18:47:14.280 に答える
4

stackoverflow.com/a/10779289に触発されました

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}
于 2012-05-29T00:23:28.423 に答える
3

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

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

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

そして書く：

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

css ルールで margin-left: -20px をキャンセルします。

.row {margin-left: 0;}

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

.indent {margin-left: 0;}

次に<div class="row">、クラスに追加します <div class="row indent">

于 2011-12-14T15:17:00.697 に答える