使div与表响应相同

Question

我有这行代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row font-bold mt-4">
		<div class="col-md-1">Seq</div>
		<div class="col-md-3">Penalty Type</div>
		<div class="col-md-1">Penalty</div>
		<div class="col-md-2">Penalty Fee</div>
		<div class="col-md-2">Date</div>
		<div class="col-md-3">Comment</div>
	</div>
	<div class="row my-3">
		<div class="col-md-1">1</div>
		<div class="col-md-3">PIC - (W) Curfew Time violation within 3 hours</div>
		<div class="col-md-1">1</div>
		<div class="col-md-2">500.00</div>
		<div class="col-md-2">06/08/2018</div>
		<div class="col-md-3">
			<p>Curfew Time violation within 3 hours</p>
			<p>Permission : 2018-06-08 22:00</p>
			<p>In Time :2018-06-08 23:53:45</p>
			<p>( 113 minutes over )</p>
		</div>
	</div>
	<div class="row my-3">
		<div class="col-md-1">2</div>
		<div class="col-md-3">PIC - (W W2) Staying out Without Permission</div>
		<div class="col-md-1">2</div>
		<div class="col-md-2">1000.00</div>
		<div class="col-md-2">06/16/2018</div>
		<div class="col-md-3">
			<p>Curfew Time violation ( 3 hours over )</p>
			<p>Permission : 2018-06-15 22:00</p>
			<p>In Time :2018-06-16 1:11:50</p>
			<p>( 191 minutes over )</p>
		</div>
	</div>
	<div class="row my-3">
		<div class="col-md-4">
			<h3 class="text-danger">Total</h3>
		</div>
		<div class="col-md-1">3</div>
		<div class="col-md-2">1500.00</div>
		<div class="col-md-2">-</div>
		<div class="col-md-3">-</div>
	</div>
  
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

实际上这看起来像一张表，这是它的输出：

我想使它具有响应性，就像移动设备中的表格一样，它们分别位于scrollable和x上的y上，但是在我的情况下，因为它只是一个div，col将为12，所以我希望它们保持相同的位置，并且仅使div scrollable可以吗？

Answer 1

从所有-md类名中删除col；例如col-md-2变成col-2。这将防止桌子在移动设备上塌陷。例如，请参见代码段。

但是我同意以上评论，您应该考虑使用<table>而不是<div>元素来构建它。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row font-bold mt-4">
		<div class="col-1">Seq</div>
		<div class="col-3">Penalty Type</div>
		<div class="col-1">Penalty</div>
		<div class="col-2">Penalty Fee</div>
		<div class="col-2">Date</div>
		<div class="col-3">Comment</div>
	</div>
	<div class="row my-3">
		<div class="col-1">1</div>
		<div class="col-3">PIC - (W) Curfew Time violation within 3 hours</div>
		<div class="col-1">1</div>
		<div class="col-2">500.00</div>
		<div class="col-2">06/08/2018</div>
		<div class="col-3">
			<p>Curfew Time violation within 3 hours</p>
			<p>Permission : 2018-06-08 22:00</p>
			<p>In Time :2018-06-08 23:53:45</p>
			<p>( 113 minutes over )</p>
		</div>
	</div>
	<div class="row my-3">
		<div class="col-1">2</div>
		<div class="col-3">PIC - (W W2) Staying out Without Permission</div>
		<div class="col-1">2</div>
		<div class="col-2">1000.00</div>
		<div class="col-2">06/16/2018</div>
		<div class="col-3">
			<p>Curfew Time violation ( 3 hours over )</p>
			<p>Permission : 2018-06-15 22:00</p>
			<p>In Time :2018-06-16 1:11:50</p>
			<p>( 191 minutes over )</p>
		</div>
	</div>
	<div class="row my-3">
		<div class="col-4">
			<h3 class="text-danger">Total</h3>
		</div>
		<div class="col-1">3</div>
		<div class="col-2">1500.00</div>
		<div class="col-2">-</div>
		<div class="col-3">-</div>
	</div>
  
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>