10

Twitter Bootstrapでのパディングはやや死ぬほど行われており、以前はある程度達成できましたが、現在、3つのspan4列をパディングされた白い背景の行にうまく配置しようとしています。

私は余分な、非意味的なものを追加するさまざまな方法を試しましたが、役に立ちdivませんでした。

私が試してみました：

<div id="mydiv">

            <div class="wrap">

                <div class="row">

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                </div> <!-- .row -->

            </div> <!-- wrap -->

        </div> <!-- mydiv -->

そしてまた：

<div id="mydiv" class="row">

            <div class="wrap">

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

            </div> <!-- wrap -->

        </div> <!-- mydiv -->

「wrap」divには次のCSSがあります。

.wrap {
padding: 35px;
background-color: #F7F7F7;
border: 1px solid #DDD;

}

ただし、毎回、行は次の行にプッシュダウンされるか、コンテンツをまったくラップしません。

以前、行の後に非セマンティックを使用してパディングを追加することができましdivたが、今回は機能しないようです。

誰かが私を正しい方向に向けることができますか？

ありがとう。

4

1 に答える 1

14

スタイリングに追加するのではなくdiv、行に別のスタイルを追加するだけです。たとえばrow-padded、、それに応じて新しいスタイルをその子に渡します。例えば：

CSS

.row-padded {
  padding: 35px;
  background-color: #F7F7F7;
  border: 1px solid #DDD;
}

.row-padded .span4 {
  background-color: #bbb;
  width: 30%;
}

</ p>

HTML

<div id="mydiv" class="container">

  <div class="row row-padded">

    <div class="span4">
      <ul>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
      </ul>
    </div> <!-- .span4 -->

    <div class="span4">
      <ul>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
      </ul>
    </div> <!-- .span4 -->

    <div class="span4">
      <ul>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
        <li>Random link</li>
      </ul>
    </div> <!-- .span4 -->


  </div> <!-- .row -->

</div> <!-- container -->​

JSFiddle

注：幅のパーセントだけでなく、.span4 .row-padded 幅にレスポンシブな明示的な値（px単位）を定義することをお勧めします。簡潔にするためにパーセントのみを使用しました。

于 2012-07-31T12:24:47.060 に答える