Добавление цвета фона и отступов для строки в бутстрапе Twitter

Я понимаю, что заполнение в Twitter Bootstrap было сделано несколько до смерти, и мне до этого удалось достичь этого, но в настоящее время я пытаюсь заставить мои три столбца 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 после строки, но на этот раз она не работает.

Может ли кто-нибудь указать мне в правильном направлении?

Спасибо.

Ответ 1

Вместо добавления дополнительного стиля 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

Примечание.. Вероятно, вы хотите определить чувствительное явное значение (в px) для .span4 .row-padded width, а не просто процентную ширину. Я использовал процент для краткости.