web-dev-qa-db-ja.com

Twitterの行に背景色とパディングを追加するbootstrap

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を使用してパディングを追加することができましたが、今回は機能しないようです。

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

ありがとう。

twitter-bootstraprowpadding
10
onjegolders

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

CSS

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

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

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-paddedwidthのレスポンシブな明示的な値（px単位）を定義する必要があります。 単にパーセント幅ではなく。簡潔にするために、パーセントのみを使用しました。

13
merv