Question

我希望特定单元格具有左右边框。我正在使用bootstrap 4 beta。我尝试过使用：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<table class="table">
  <tr>
    <td scope="col" class="white-text mx-0 border border-white border-bottom-0">Abc</td>
    <td>test</td>
  </tr>
</table>

＆＃13;

但它不起作用。欢迎任何建议：）

Answer 1

将border-top-0添加到您的代码

<td scope="col" class="white-text mx-0 border border-white border-bottom-0 border-top-0">Abc</td>

从下面的评论中添加@ paulie-D的笔

codepen.io/Paulie-D/pen/zpaxmY

Answer 2

首先，您使用的是过时版本的Bootstrap 4。 Bootstrap 4的最新版本是beta 3。

其次，Bootstrap列（.col）旨在用于Bootstrap行（.row）。

这些行应该变成带有.container类的div。

对于表格，只需添加类.table即可获得适当的间距。

为表格和单元格的所有边添加.table-bordered。

试试这个：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <div class="col">
            <table class="table table-bordered">
                <tr>
                    <td scope="col" class="white-text mx-0 border border-white border-bottom-0">Abc</td>
                    <td>test</td>
                </tr>
            </table>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

＆＃13;

如何添加左右边框？

2 个答案: