Я понимаю, что отступы в 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" имеет следующий CSS:
.wrap {
padding: 35px;
background-color: #F7F7F7;
border: 1px solid #DDD;
}
Но каждый раз строка либо перемещается на следующую строку, либо вообще не оборачивает содержимое.
Раньше мне удавалось добавить отступы, используя несемантическую div
после строки, но на этот раз, похоже, это не работает.
Может ли кто-нибудь указать мне в правильном направлении?
Спасибо.