Question

我有可点击的表格“行”，右边有2个徽章。由于我每行只有1个td，我很确定我可以用列表替换表。试过List-groups组件，但我没有成功地正确添加徽章（不能让它像表一样响应，在移动设备上看起来也不错）。

基本上，我想完成附加示例中的内容，但没有表格和更干净的代码： http://www.bootply.com/hdMRA7kECz

这是我到目前为止所尝试的： http://www.bootply.com/vCnyrAP1JS

当您在移动设备上尝试此操作并调整列表大小时，徽章会在列表项的底部不断切换。

Answer 1

感谢您澄清您的问题。我能够简化代码并删除table代码并将其替换为div

这里保留代码的顶部部分是以前提交的项目的HTML片段。

编辑更新代码：

<div class="table table-bordered table-striped table-hover">
    <div class="custom-item">
        <a class="tbl-link" href="#">Adele ft Elvis prestly ft long text
            <span class="pull-right"><span class="badge">24 Songs</span>
                <span class="badge">3500 Views</span>
            </span>
        </a>
    </div>
    <!--2nd item here-->
    <!--3rd item here-->
    <!--4th item here etc-->
</div>

更新了CSS

.custom-item {
    display: inline-block;
    height: 100%;
    width: 100%;
}
.custom-item:nth-child(even) {
    background: pink;
}
.tbl-link {
    border-top: 1px solid red;
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    width:100%;
}
.tbl-link:hover {
    background: lightgray;
    color: black;
    text-decoration: none;
}

我对Bootply并不是很熟悉I made a JS.Fiddle if you want to see it all in action。希望有所帮助。

Bootstrap 3表更换

1 个答案: