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 引导类来避免两列之间的空格。

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