我有可点击的表格“行”,右边有2个徽章。 由于我每行只有1个td,我很确定我可以用列表替换表。试过List-groups组件,但我没有成功地正确添加徽章(不能让它像表一样响应,在移动设备上看起来也不错)。
基本上,我想完成附加示例中的内容,但没有表格和更干净的代码: http://www.bootply.com/hdMRA7kECz
这是我到目前为止所尝试的: http://www.bootply.com/vCnyrAP1JS
当您在移动设备上尝试此操作并调整列表大小时,徽章会在列表项的底部不断切换。
答案 0 :(得分: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。希望有所帮助。