我正在尝试制作2行列,每行都有一些div。对于前2个div,内容就是我喜欢的方式,但在其他方面......我似乎无法找到我的错误..一些错误的填充或其他东西。我希望内容在图像中看起来像小屏幕和中等。当我尝试放大/缩小时,一些div不会有相同的大小或缩放。我只是无法弄明白。这是一个bootply链接:www.bootply.com/7SYM2HRGVg
答案 0 :(得分:1)
我达到了你想要的结果。尝试用bootply改变你的整个CSS(我主要拿出你的一些不必要的声明,你想让bootstrap完成它的工作):
main .row {
}
main .row div {
}
main .row div h2 {
font-family: "Open Sans";
margin-bottom: 10%;
}
main .row div p {
width: 100%;
padding-right: 10px;
color: #959595;
font-family: "Open Sans";
font-size: 13px;
line-height: 1.7em;
}
main .row #second_text {
margin-top: 12%;
}
main #row2,
main #row3 {
}
main #row2 div,
main #row3 div {
background-color: #f5989d;
}
main #row2 div:hover,
main #row3 div:hover {
cursor: pointer;
background-color: #82ca9c;
}
main #row2 div h3,
main #row3 div h3 {
padding-bottom: 2%;
color: #fff;
font-family: "Open Sans";
}
main #row2 div p,
main #row3 div p {
line-height: 1.8em;
font-family: "Open Sans";
color: #fff;
}
main #row2 div p:last-of-type,
main #row3 div p:last-of-type {
width: 160px;
font-weight: bold;
margin-bottom: 0;
}
main #row2 div p:last-of-type i,
main #row3 div p:last-of-type i {
vertical-align: middle;
margin-left: 10px;
font-size: 18px;
}
main #row2 div #icon2,
main #row3 div #icon2 {
position: relative;
color: #fff;
font-size: 18px;
}
main #row2 #box2,
main #row3 #box2 {
background-color: #615f7d;
}
main #row2 #box2:hover,
main #row3 #box2:hover {
cursor: pointer;
background-color: #192431;
}
main #row2 #box3,
main #row3 #box3 {
background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/Clients.png") no-repeat #fff;
background-size: cover;
background: black;
}
main #row2 #box3:hover,
main #row3 #box3:hover {
background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/Clients2.png") no-repeat;
background-size: cover;
}
main #row2 #box3 p:last-of-type,
main #row3 #box3 p:last-of-type {
margin-top: 16%;
margin-bottom: 0;
}
main #row3 {
margin-top: 0;
}
main #row3 div {
background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/SignUp.png") no-repeat #fff;
background-size: cover;
background: aquamarine;
}
main #row3 div:hover {
background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/SignUp2.png") no-repeat;
background-size: cover;
}
h3 {
margin-top: 0;
padding-top: 10px;
}
main #row3 div p {
width: 65%;
}
main #row3 div p:last-of-type {
}
main #row3 div #icon3 {
position: relative;
color: #fff;
font-size: 18px;
}
main #row3 #box4 {
background: none #82ca9c;
}
main #row3 #box4:hover {
cursor: pointer;
background-color: #f5989d;
}
main #row3 #box4 h3 {
color: #fff;
font-family: "Open Sans";
}
main #row3 #box4 p {
width: 100%;
line-height: 1.8em;
font-family: "Open Sans";
color: #fff;
}
main #row3 #box4 p:last-of-type {
width: 160px;
font-weight: bold;
}
main #row3 #box4 p:last-of-type i {
vertical-align: middle;
margin-left: 10px;
font-size: 18px;
}
然后添加javascript文件引用,以便div总是具有相同的高度:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script type="text/javascript">
$(function() {
$('.col-sm-4, .col-sm-8').matchHeight();
});
</script>