当前位置：文江博客话题详情

bootstrap一行要显示5个怎么弄？

发布于 2022-09-02 10:17:05 字数 653 浏览 8 评论 0

正在使用bootstrap4.0，每行要显示4个，可以用class="col-xs-3",可是要显示5个怎么弄呢？比如下面这个：

<table class="table table-sm table-bordered">
    <tr>
        <td class="col-xs-4">水果</td>
        <td class="col-xs-8">
            <ul>
                <li class="col-xs-3">苹果</li>
                <li class="col-xs-3">香蕉</li>
                <li class="col-xs-3">番茄</li>
                <li class="col-xs-3">石榴</li>
                <li class="col-xs-3">芒果</li>  //多出一个
            </ul>
        </td>
    </tr>
</table>

收藏 0

分享到微博

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

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

发布评论

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

评论（7）

江城子 2022-09-09 10:17:05

亲，使用card啊

<div class="card-group">
  <div class="card">
    这里是内容
  </div>
  <div class="card">
    这里是内容
  </div>
  <div class="card">
    这里是内容
  </div>
  <div class="card">
    这里是内容
  </div>
  <div class="card">
    这里是内容
  </div>
</div>

在一个card-group里面有几个card，cardgroup就会几等分，5/7/9等分 so easy~

少年，多看文档啊。。。
Bootstrap-v4-card

写下不归期 2022-09-09 10:17:05

如果不是占满行，可以让第一个class="col-xs-offset-1 col-xs-2"偏移一列，其余4个class="col-xs-2";

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
    <table class="table table-sm table-bordered">
        <tr>
            <td class="col-xs-4">水果</td>
            <td class="col-xs-8">
                <ul class="list-unstyled">
                    <li class="col-xs-offset-1 col-xs-2 text-center">苹果</li>
                    <li class="col-xs-2 text-center">香蕉</li>
                    <li class="col-xs-2 text-center">番茄</li>
                    <li class="col-xs-2 text-center">石榴</li>
                    <li class="col-xs-2 text-center">芒果</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

一身软味 2022-09-09 10:17:05

四没出吧……有一种功能叫自定义，默认一行12列，但列数可以更改

你丑哭了我 2022-09-09 10:17:05

好前卫，3都没用会

酷遇一生 2022-09-09 10:17:05

我建议你用他的less重新做一份样式出来 bs我记得那个数不是16就是12(好久没看了就写框架封装的时候用过一次) 印象中没法被5整除。。你咋做出等比5个来。。

另外，都用bootstrap4了，那就是准备放弃老旧浏览器了，用毛的栅格啊，果断用flex布局，随便几个等分，然后两边留白一居中，爽

酷炫老祖宗 2022-09-09 10:17:05

http://v3.bootcss.com/css/#grid-less
可以使用less自定义的。

无声情话 2022-09-09 10:17:05

对，直接用flex盒式布局，自己写就行

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

玍銹的英雄夢

文章 0 评论 0

我不会写诗

文章 0 评论 0

十六岁半

文章 0 评论 0

浸婚纱

文章 0 评论 0

qq_kJ6XkX

文章 0 评论 0

旧伤还要旧人安

文章 0 评论 0

友情链接

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

原文