css - Bootstrap col 在另一个 col 之间留一个空格

Question

在这里您可以看到在两个 col-md-6 div 之间，有一点空白。我需要将其删除，以便灰色条看起来像一个。

     <div class="row">
        <div class="col-md-12 performers-table" style="padding:0 !important;">
            <div class="col-md-6" style="padding:0 !important;">
                <table class="table table-striped">
                    <tr>
                        <th>Rating - Top 3 <i class="fa fa-thumbs-up"></i></th>
                        <th></th>
                    </tr>
                    <tr>
                        <td>
                            <i class="fa fa-eye"></i>{{$performers['over'][0]['name'] }}
                        </td>
                        <td>
                            {{$performers['over'][0]['review_count_approved'] }}<div class="average-review-stars smaller-stars" id="performersover{{ $performers['over'][0]['id'] }}"></div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6" style="padding:0 !important;">
                <table class="table table-striped">
                    <tr>
                        <th>Rating - Top 3 <i class="fa fa-thumbs-up"></i></th>
                        <th></th>
                    </tr>
                    <tr>
                        <td>
                            <i class="fa fa-eye"></i>{{$performers['over'][0]['name'] }}
                        </td>
                        <td>
                            {{$performers['over'][0]['review_count_approved'] }}<div class="average-review-stars smaller-stars" id="performersover{{ $performers['over'][0]['id'] }}"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

有人知道为什么会这样吗？我已经从 div 中删除了所有填充

Answer 1

您可以使用 .no-gutter Bootstrap 类来避免两列之间出现空格。

默认情况下，bootstrap 行将包含 15px 的左右边距。