BootStrap 栅格内容文字过长如何使各行长度对齐

发布于 2022-09-02 14:04:30 字数 1945 浏览 10 评论 0

我通过设置不同的 col-md- col-sm- 希望实现不同页面宽度下一行显示不同数量的Item。
但是因为文件名长度的问题在某些宽度下的Item宽度参差不齐,请问应该做到各个ITEM宽度一致的效果?谢谢

这个部分代码节选:

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="row file-list-row">

        ...

        <div class="col-md-4 col-sm-6 dashboard-item">
            <div class="media btn btn-default">
                <a href="/file.html">
                    <div class="media-left">
                        <img class="media-object" src="/images/ic_file_word.png" height="42" width="42">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">国家励志奖学金申请表.docx</h4> By 教务处 <small>2016/01/01</small>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-md-4  col-sm-6 dashboard-item">
            <div class="media btn btn-default">
                <div class="media-left">
                    <img class="media-object" src="/images/ic_file_word.png" height="42" width="42">
                </div>
                <div class="media-body">
                    <h4 class="media-heading">教师使用申请表.docx</h4> By 教务处 <small>2016/01/01</small>
                </div>
            </div>
        </div>
        
        ...

    </div>
</div>

clipboard.png

clipboard.png

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

雪花飘飘的天空 2022-09-09 14:04:30

设置一个max-width不是就行了,不知道楼主是不是还有什么别的需求不能用这个属性?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文