html - Bootstrap 行更多列并 overflow hidden

Question

我已经像那样制作了自己的 bootstrap col

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

还有一些更大的列，比如 .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>

最后一列的宽度为 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;}