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

正在使用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>

bootstrap

阅读 25.5k

7 个回答

ZTfer

亲，使用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

hellnpeter

1.3k115

发布于
2016-03-10

更新于
2016-03-10

如果不是占满行，可以让第一个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>