重复行未对齐的Bootstrap 4表单
我正在尝试制作一个有用的反应形式来修改温室自动化设备的设置。我无法通过Bootstrap 4使外观看起来很好。您能提供任何建议吗？我的主要问题是：
-
该表格分为三部分-常规，端口设置和规则（用于根据计时器，其他端口触发或环境数据（例如CO2或温度/湿度）打开和关闭端口）我尝试使用面板来分隔部分，但面板周围没有边框。
-
每个端口可以是输入或输出，并且设置因方向而异。我不喜欢在浏览器或iphone上显示的方式，但是如果我什至可以使它正确地居中放置元素，则至少可以使用（标题未居中，复选框不在其列内，间距已关闭）
我没有添加最后一部分，因为我无法正确显示前两个。这是我到目前为止完成的代码：
<div class="container-fluid">
<div class="text-center"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h2>Device Settings</h2>
</div>
<div class="panel-body">
<form id="generic" class="form-horizontal" name="generic" action="http://127.0.0.1:51709/settings/handleDevice/deviceID/3" method="post">
<div class="form-row">
<label for="deviceName" class="col-sm-2 col-form-label">Device Name</label>
<div class="col-sm-4">
<input type="text" name="deviceName" class="form-control" id="deviceName" value="Shop Monitor" onchange="this.form.submit();">
</div>
<label for="deviceAbbr" class="col-sm-2 col-form-label">ABBR</label>
<div class="col-sm-4">
<input type="text" name="deviceAbbr" class="form-control" id="deviceAbbr" value="MA" onchange="this.form.submit();">
</div>
</div>
<div class="form-row">
<div class="col-sm-2">Device Status</div>
<div class="col-sm-10">
<div class="form-check">
<input type="checkbox" name="bActive" id="bActive" class="form-check-input" value="1" onchange="this.form.submit();" checked="">
<label for="bActive" class="form-check-label">(Active)</label>
</div>
</div>
</div>
<div class="form-row">
<label for="fwVersion" class="col-sm-2 col-form-label">Firmware Version</label>
<div class="col-sm-10"> <input type="text" name="fwVersion" readonly="" class="form-control-plaintext" id="deviceAbbr" value="41"> </div>
</div>
<div class="form-row">
<label for="configVersion" class="col-sm-2 col-form-label"> Config Version </label>
<div class="col-sm-10"> <input type="text" name="configVersion" readonly="" class="form-control-plaintext" id="deviceAbbr" value="99"> </div>
</div>
<div class="form-row">
<label for="configVersion" class="col-sm-2 col-form-label"> Last Seen </label>
<div class="col-sm-10"> <input type="text" name="dLastSeen" readonly="" class="form-control-plaintext" style="color: green" id="deviceAbbr" value="07/12/19 07:30:01"></div>
</div>
<div class="form-row">
<label for="serialNumber" class="col-sm-2 col-form-label"> Serial Number </label>
<div class="col-sm-10"> <input type="text" name="configVersion" readonly="" class="form-control-plaintext" id="deviceAbbr" value="240AC413FD24"> </div>
</div>
</form>
</div>
</div>
<hr>
<div class="panel panel-default">
<div class="panel-heading">
<h2>Port Settings</h2>
</div>
<div class="panel-body">
<form id="ports" name="ports" action="http://127.0.0.1:51709/settings/handleAirnode/deviceID/3" method="post">
<div class="form-row text-align-center">
<div class="col-sm-2 text-align-center"></div>
<div class="col-sm-1 text-align-center">Active</div>
<div class="col-sm-2 text-align-center">Type</div>
<div class="col-sm-2 text-align-center">Port Name</div>
<div class="col-sm-2 text-align-center">NO/NC</div>
<div class="col-sm-2 text-align-center">Debounce (ms)</div>
<div class="col-sm-1 text-align-center">Notify?</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 5</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_5" class="form-check-input" value="1">
</div>
<div class="col-sm-2">
<select name="ps_bInput_5" class="form-control" onchange="this.form.submit();">
<option value="1" selected="">INPUT</option>
<option value="0">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_5" value="Port 5" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_5" class="form-control">
<option value="1">Normally Closed</option>
<option value="0" selected="">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_debounce_5" value="200" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bNotify_5" class="form-check-input" value="1">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 6</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_6" class="form-check-input" value="1">
</div>
<div class="col-sm-2">
<select name="ps_bInput_6" class="form-control" onchange="this.form.submit();">
<option value="1" selected="">INPUT</option>
<option value="0">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_6" value="Port 6" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_6" class="form-control">
<option value="1">Normally Closed</option>
<option value="0" selected="">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_debounce_6" value="200" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bNotify_6" class="form-check-input" value="1">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 7</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_7" class="form-check-input" value="1">
</div>
<div class="col-sm-2">
<select name="ps_bInput_7" class="form-control" onchange="this.form.submit();">
<option value="1" selected="">INPUT</option>
<option value="0">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_7" value="Port 7" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_7" class="form-control">
<option value="1">Normally Closed</option>
<option value="0" selected="">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_debounce_7" value="200" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bNotify_7" class="form-check-input" value="1">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 8</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_8" class="form-check-input" value="1" checked="">
</div>
<div class="col-sm-2">
<select name="ps_bInput_8" class="form-control" onchange="this.form.submit();">
<option value="1" selected="">INPUT</option>
<option value="0">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_8" value="PIR" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_8" class="form-control">
<option value="1">Normally Closed</option>
<option value="0" selected="">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_debounce_8" value="200" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bNotify_8" class="form-check-input" value="1">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2 text-align-center"></div>
<div class="col-sm-1 text-align-center">Active</div>
<div class="col-sm-2 text-align-center">Type</div>
<div class="col-sm-2 text-align-center">Port Name</div>
<div class="col-sm-2 text-align-center"></div>
<div class="col-sm-2 text-align-center">Timeout (sec)</div>
<div class="col-sm-1 text-align-center">Allow Virtual?</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 1</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_1" class="form-check-input" value="1" checked="">
</div>
<div class="col-sm-2">
<select name="ps_bInput_1" class="form-control" onchange="this.form.submit();">
<option value="1">INPUT</option>
<option value="0" selected="">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_1" value="CO2 Valve" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_1" class="form-control">
<option value="1" selected="">Normally Closed</option>
<option value="0">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_timeout_1" value="0" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bVirtual_1" class="form-check-input" value="1" checked="">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 2</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_2" class="form-check-input" value="1" checked="">
</div>
<div class="col-sm-2">
<select name="ps_bInput_2" class="form-control" onchange="this.form.submit();">
<option value="1">INPUT</option>
<option value="0" selected="">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_2" value="Exhaust Fan" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_2" class="form-control">
<option value="1" selected="">Normally Closed</option>
<option value="0">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_timeout_2" value="0" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bVirtual_2" class="form-check-input" value="1" checked="">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 3</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_3" class="form-check-input" value="1" checked="">
</div>
<div class="col-sm-2">
<select name="ps_bInput_3" class="form-control" onchange="this.form.submit();">
<option value="1">INPUT</option>
<option value="0" selected="">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_3" value="Alert" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_3" class="form-control">
<option value="1" selected="">Normally Closed</option>
<option value="0">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_timeout_3" value="0" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bVirtual_3" class="form-check-input" value="1" checked="">
</div>
</div>
<div class="form-row text-align-center">
<div class="col-sm-2">
<span class="">Port 4</span>
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bActive_4" class="form-check-input" value="1" checked="">
</div>
<div class="col-sm-2">
<select name="ps_bInput_4" class="form-control" onchange="this.form.submit();">
<option value="1">INPUT</option>
<option value="0" selected="">OUTPUT</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_name_4" value="Lights" class="form-control">
</div>
<div class="col-sm-2">
<select name="ps_bState_4" class="form-control">
<option value="1" selected="">Normally Closed</option>
<option value="0">Normally Open</option>
</select>
</div>
<div class="col-sm-2">
<input type="text" name="ps_timeout_4" value="0" class="form-control">
</div>
<div class="col-sm-1">
<input type="checkbox" name="ps_bVirtual_4" class="form-check-input" value="1" checked="">
</div>
</div>
</form>
</div>
</div>
</div>
您可以view this on codeply（在下部窗口的右侧查找预览图标）
1 个答案:
答案 0 :(得分：0)
您的代码有几个问题：
- 没有
.text-align-center类。而是使用.text-center。 - 没有
.panel。在 Bootstrap 4 中，它已由.card取代。 - 带有
.form-check-input的复选框必须用.form-check包装，因为它的绝对位置为负边距。
这些复选框太多了，因此我只将其固定在前两行。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？