Question

我已经制作了自己的bootstrap col

.col-lg-8th{
    width:12.5%;
    float:left;
    text-align: center;
    border-right: 1px solid rgb(181,181,181);
}

并且还有一些更大的cols .COL-LG-8th3 { 宽度：37.5％; }

我如何实现这一行

 <div class="row calendarrow">
            <div class="col-lg-8th">
            </div>
            <div class="col-lg-8th">
            </div>
            <div class="col-lg-8th">
            </div>
            <div class="col-lg-8th">
            </div>
            <div class="col-lg-8th">
            </div>
            <div class="col-lg-8th">
            </div>
            <div class="col-lg-8th5">
            </div>
        </div>

最后一个col的宽度为62.5％但是没有被放入下一行但是在100％之后被切断了？

由于

Answer 1

我认为你在找这样的东西？ https://jsfiddle.net/DIRTY_SMITH/ocqpsvvc/8/

.col-lg-8th{
    width:12.5%;
    height: 50px;
    display: inline-block;
    text-align: center;
    border-right: 1px solid rgb(181,181,181);
    background-color: lightblue;
}
.col-lg-8th5{
    width:62.5%;
    height: 50px;
    display: inline-block;
    text-align: center;
    border-right: 1px solid rgb(181,181,181);
    background-color: lightgreen;
}
.calendarrow{white-space: nowrap; overflow: hidden;}

bootstrap行更多列和溢出隐藏

1 个答案: