删除 Bootstrap 4 行中的垂直空间答案

【问题标题】：Remove Vertical Space in Bootstrap 4 Row删除 Bootstrap 4 行中的垂直空间
【发布时间】：2021-03-19 16:57:30
【问题描述】：

我想去掉垂直空间（看下面这张图=>红色标记）

使用：引导 4

我尝试将 m-0 和 p-0 类放在每个 col-6 中，但它仍然不起作用。

我的代码有什么问题吗？

这里是我当前的代码：

        <div class="row">
            <div class="col-6 w-100">
                <div class="card">
                    <div class="card-body">
                        <div class="row px-2">
                            <div class="col-12">
                                <h5>Detail Transaksi</h5>
                            </div>
                        </div>
                        
                        <div class="row mt-4 px-2" style="font-size: 12px;">
                            <div class="col-4 text-left">
                                <p>Kode Transaksi</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Tanggal</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Kasir</p>
                            </div>
                        </div>
                        
                        <div class="row px-2" style="font-size: 14px;">
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                        </div>

                        <div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="drml-bg-lightgray">
                                            <th class="text-left">Nama Produk</th>
                                            <th class="text-center" width="100">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-secondary">
                                        <tr>
                                            <td class="text-left">Lorem Ipsum</td>
                                            <td class="text-center">Lorem Ipsum</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <div class="row px-2">
                            <div class="col-12">
                                <h5>Detail Transaksi</h5>
                            </div>
                        </div>
                        
                        <div class="row mt-4 px-2" style="font-size: 12px;">
                            <div class="col-4 text-left">
                                <p>Kode Transaksi</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Tanggal</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Kasir</p>
                            </div>
                        </div>
                        
                        <div class="row px-2" style="font-size: 14px;">
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">Lorem Ipsum</p>
                            </div>
                        </div>

                        <div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="drml-bg-lightgray">
                                            <th class="text-left">Nama Produk</th>
                                            <th class="text-center" width="100">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-secondary">
                                        @foreach($transaction->retail_transaction_products as $row)
                                            <tr>
                                                <td class="text-left">{{ $row->product->name }}</td>
                                                <td class="text-center">{{ $row->quantity }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <div class="row px-2">
                            <div class="col-12">
                                <h5>Detail Transaksi</h5>
                            </div>
                        </div>
                        
                        <div class="row mt-4 px-2" style="font-size: 12px;">
                            <div class="col-4 text-left">
                                <p>Kode Transaksi</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Tanggal</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Kasir</p>
                            </div>
                        </div>
                        
                        <div class="row px-2" style="font-size: 14px;">
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">{{ $transaction->code }}</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">{{ formatted_date($transaction->created_at) }}</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">{{ $transaction->branch_operational->open_employee->name }}</p>
                            </div>
                        </div>

                        <div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="drml-bg-lightgray">
                                            <th class="text-left">Nama Produk</th>
                                            <th class="text-center" width="100">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-secondary">
                                        <tr>
                                            <td class="text-left">Lorem Ipsum</td>
                                            <td class="text-center">Lorem Ipsum</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <div class="row px-2">
                            <div class="col-12">
                                <h5>Detail Transaksi</h5>
                            </div>
                        </div>
                        
                        <div class="row mt-4 px-2" style="font-size: 12px;">
                            <div class="col-4 text-left">
                                <p>Kode Transaksi</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Tanggal</p>
                            </div>
                            <div class="col-4 text-left">
                                <p>Kasir</p>
                            </div>
                        </div>
                        
                        <div class="row px-2" style="font-size: 14px;">
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">{{ $transaction->code }}</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">{{ formatted_date($transaction->created_at) }}</p>
                            </div>
                            <div class="col-4 text-left">
                                <p class="font-weight-bold">{{ $transaction->branch_operational->open_employee->name }}</p>
                            </div>
                        </div>

                        <div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="drml-bg-lightgray">
                                            <th class="text-left">Nama Produk</th>
                                            <th class="text-center" width="100">Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-secondary">
                                        <tr>
                                            <td class="text-left">Lorem Ipsum</td>
                                            <td class="text-center">Lorem Ipsum</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

有人可以帮助我吗？提前致谢！

我也尝试过使用 float-right/left，但我认为它不是动态的

【问题讨论】：

标签： html css laravel layout bootstrap-4

【解决方案1】：

您可以将其添加到 CSS：

   .card {
      height: 100%;
    }

或者对于引导程序使其成为：

<div class="card h-100">

在这里工作：https://jsfiddle.net/e5zxqnfp/

【讨论】：

但它并没有删除空间，而是通过增加卡片的高度来隐藏空间，你有没有想法删除那个空间？
@MuhammadRobbiZulfikar 您正在使用网格。网格的目的就是做到这一点。我建议使用 2 个网格，一个用于左侧，一个用于右侧。然后它就会消失。
先生，如何使用2个网格？
啊我现在完成了！谢谢，我通过
@MuhammadRobbiZulfikar 太好了，很高兴能帮上忙。我很好奇，你能把你所做的事情发一下吗？