10

我意识到 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后使用非语义来添加填充，但这一次，它似乎不起作用。

谁能指出我正确的方向？

谢谢。

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

注意：您可能希望为宽度定义一个响应显式值（以 px 为单位），.span4 .row-padded 而不仅仅是百分比宽度。为了简洁起见，我只使用了百分比。

于 2012-07-31T12:24:47.060 回答