Question

好的我使用bootstrap，我有主要内容，主要内容我左右。在左侧的内容和右侧我有8个盒子。我尝试了所有的东西，但我不能让左右两边相等。

.main-content{
    float: left;
    width: 100%;
    position: relative;


}
.main-content .right-box.col-md-4{
    width: 37.5%;
    padding-left:0;
    padding-right:0;
    float:right;
    position:absolute;  
    top:0;
    bottom:0;
    right: 0;

}
.main-content .left-box.col-md-8{
    width:62.5%;
    padding-left:0;
    padding-right: 0;
    background-color: #fff;
    float: left;
    position: relative;

}

FIDDLE：https://jsfiddle.net/rvqg3fd7/ 并且右侧的最后一个div需要与左侧的div相同的高度。我尝试过但没有成功。

Answer 1

高度是一个不应该在Bootstrap驱动的网站中强制使用的元素，因为Bootstrap依赖于它的垂直灵活性来响应较小的设备。毕竟，这是任何人使用Bootstrap的主要目的。然而，如果你坚持，那么你必须给每个元素一个明确的高度并用填充物控制这样的高度。

您没有提供我们可以使用的代码（甚至不是小提琴），所以我发布我的演示，以便您可以看到实现此目的所需的引导类架构;

这是HTML

<div class="container">
    <div class="row main-content">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
                <div class="box left">

                </div>  
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="row">
                <div class="box right">
                    <div class=" innerbox col-xs-12">
                        1
                    </div>
                    <div class=" innerbox col-xs-12">
                        2
                    </div>      
                    <div class=" innerbox col-xs-12">
                        3
                    </div>  
                    <div class=" innerbox col-xs-12">
                        4
                    </div>  
                    <div class=" innerbox col-xs-12">
                        5
                    </div>  
                    <div class=" innerbox col-xs-12">
                        6
                    </div>  
                    <div class=" innerbox col-xs-12">
                        7
                    </div>  
                    <div class=" innerbox col-xs-12">
                        8
                    </div>  
                </div>
            </div>  
        </div>
    </div>
</div>

和CSS

.box.left{
    background:red;
    text-align:center;
    color: white;
    height:350px;
}
.box.right{
    background:blue;
    text-align:center;
    color: white;
    height:350px;
    padding:10px
}

.innerbox{
    background:lightgray;
    text-align:center;
    color: black;
    height:30px;
    margin-top:10px;
}

.main-content{
    float: left;
    width: 100%;
    position: relative;
}

指向DEMO

的链接

如何获得相同的内容和侧边栏（高度）？

1 个答案: