我正在尝试提出一种最佳（最简单）的方法来实现单击链接时滑出排序面板。...
基本上有一系列的div，我希望每个div从右侧滑出一个面板，以允许添加和保存信息，然后将面板滑开...
当前信息在以下代码中显示（工作）。在PC上显示4列，而在电话上显示2列，这是我想保留的。
前提是，如果您单击引擎1或引擎2（或实际的数据库“拉”），则会得到页面覆盖，您可以通过该页面填写表单并提交。
我可以只加载另一个数据输入页面，但是认为这样做会更优雅一些。
小组讨论的一半原因是我正在尝试。命名面板...
<div class="container">
<h2></h2>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Vessel Information for <?php echo $vesseldata['vesselTag']?></div>
<div class="panel-body" >
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3"><b>Vessel Details</b></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Type of Vessel</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $basespec['newname'];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Design Reference</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['DesignRef'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Ordering Dealer</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $OrderingDealer= array_column($OrderingDealers, 'name', 'id'); echo $OrderingDealer[$vesseldata['OrderingDealer']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Hull Number</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['HullNo'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Hull Colour</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['HullColour'];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Topside Colour</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['TopsideColour'];?></div>
</div>
<div class="row"><div><br></div>
<div class="col-xs-6 col-sm-6 col-md-3"><b>Build Dates</b></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Build Complete</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['BuildDate'];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Commission Complete</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['CommissionDate'];?></div>
</div>
</div>
<div class="panel-body">
<div class="row"><div></div>
<div class="col-xs-6 col-sm-6 col-md-3"><b>Build Options</b></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3" id="engine1">Engine 1</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Engine1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Engine 1 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Engine 2</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Engine2Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Engine 2 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 1</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['SternDrive1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 1 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['SternDrive1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 2</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['SternDrive2Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Stern Drive 2 Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['SternDrive2Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Generator</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Genset1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Generator Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Genset1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Air Conditioning</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Aircon1Type']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Air Conditioning Serial</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['Aircon1Number'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Teak Pack</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['TeakPack']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Teak Cork Batch</div><div class="col-xs-6 col-sm-6 col-md-3"><?php echo $vesseldata['TeakCorkBatch'];?></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">Layout</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Layout']];?></div>
<div class="col-xs-6 col-sm-6 col-md-3">Interior Décor</div><div class="col-xs-6 col-sm-6 col-md-3"><?php $option= array_column($options, 'name', 'id'); echo $option[$vesseldata['Interior']];?></div>
</div>
</div>
</div>
</div>
</div>```