我意识到在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添加填充,但是这次似乎不起作用.
有人可以指出我的方向正确吗?
谢谢.
解决方法
而不是为样式添加一个额外的div,您应该只向行中添加另一个样式,例如排序填充,并将新样式传递给相应的子项.例如:
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 -->
注意:您可能需要为.span4 .row-padded宽度定义一个响应显式值(以px为单位),而不仅仅是宽度百分比.我只用百分比来简洁.
原文地址:https://www.jb51.cc/bootstrap/233770.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。