html - 删除 Bootstrap 4 行中的垂直空间
问题描述
我想删除垂直空间（看下面的这张图片=>红色标记）
使用：引导 4
预览：https ://jsfiddle.net/3vcp8o15/
我试图将 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>
有人可以帮助我吗？提前致谢！
我也尝试过使用浮动右/左，但我认为它不是动态的
解决方案
您可以将其添加到 CSS：
.card {
height: 100%;
}
或者对于引导程序，让它这样：
<div class="card h-100">
推荐阅读
- asp.net - Session("xxxx") 在 InitializeCulture 方法中始终是 Nothing
- javascript - 如何修复：选项卡索引跳过禁用的输入
- python - 使用 VS 代码打开时 Python 脚本找不到文件，但可以在终端上正常工作
- php - 令牌会话过期时将用户重定向到登录页面 - Laravel 5.8
- php - 更改流明中的 Faker 本地化
- security - 阻止自动对焦跨域子帧中的表单控件
- python - 如何优雅地预处理 IPython 中的代码？
- c++ - 如何通过对象参数从指针向量中删除对象和指针
- java - 如何在 Websphere 9 中设置连接属性“fixedString=true”
- javascript - gulpfile.js 4 无限循环