删除 Bootstrap 4 行中的垂直 Space
Remove Vertical Space in Bootstrap 4 Row
我想删除垂直 space（看下面这张图片 => 红色标记）
使用：Bootstrap 4
预览：https://jsfiddle.net/3vcp8o15/
我试过将 class 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，但我认为它不是动态的
您可以将此添加到 CSS:
.card {
height: 100%;
}
或者 bootstrap 做成这样：
<div class="card h-100">
我想删除垂直 space（看下面这张图片 => 红色标记）
使用：Bootstrap 4
预览：https://jsfiddle.net/3vcp8o15/
我试过将 class 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，但我认为它不是动态的
您可以将此添加到 CSS:
.card {
height: 100%;
}
或者 bootstrap 做成这样：
<div class="card h-100">