bootstrap列div没有相同的大小,不能让它们看起来像我想要的

时间:2016-09-13 17:32:59

标签: html css twitter-bootstrap

我正在尝试制作2行列,每行都有一些div。对于前2个div,内容就是我喜欢的方式,但在其他方面......我似乎无法找到我的错误..一些错误的填充或其他东西。我希望内容在图像中看起来像小屏幕和中等。当我尝试放大/缩小时,一些div不会有相同的大小或缩放。我只是无法弄明白。这是一个bootply链接:www.bootply.com/7SYM2HRGVg image

1 个答案:

答案 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>