如何解决将html表单外的按钮与表单对齐
我试图将存在于表单外部的按钮与表单的同一行对齐。窗体和两个按钮都应该响应并正确对齐以减小屏幕尺寸。我正在分享片段。请提供一些建议。
#!/bin/bash
sudo yum update-minimal --sec-severity=critical,important --bugfix | grep "No Packages marked for minimal Update" > /dev/null 2>&1
if [ $? != 0 ]
then
sudo yum -y update-minimal --sec-severity=critical,important --bugfix > /dev/null
sudo reboot
fi
解决方法
尝试在表单内的所有元素中添加一些边距，如下所示：
div.form-inline * {
margin: 2px;
}<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="form-inline">
<form class="form-inline">
<div class="form-group">
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary mt-1"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary mt-1" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>,
由于您试图将它们保持在一起，因此可以将它们视为“同级”元素。因此，您可以将它们同时放在div中并设置div的样式，以获取所需的大小。
此外，我只是将您的提交按钮上的m-2类更改为mx-0 my-2，以使其在x轴上基本上没有边距，而在y轴上没有空白。
编辑：已更新，可解决小屏幕尺寸的垂直未对齐问题
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container">
<form class="form-inline">
<div class="form-group m-0">
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group m-0">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary m-0"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary mx-0 my-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>
</body>
但是，这里的表单存在一些明显的问题：
- 您的“重置”按钮设置为键入
submit，这意味着除非您捕获表单并防止传播，否则它将提交表单。 - 您真正的提交按钮不在表格中。我不确定这是否可行，即使可行，这似乎也不是一个好习惯。如果您只想以不同的方式间隔提交按钮，请考虑添加
<br>标签或使用引导程序类。
将d-inline-flex添加到以下表单：
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div>
<form class="form-inline d-inline-flex mt-2 ml-2 align-items-start">
<div class="form-groups">
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<div class="form-group">
<select id="subo" class="form-control">
<option disabled selected="true">-Select Subcategory-</option>
<option>Good</option>
<option>Bad</option>
</select>
</div>
<button type="submit" onclick="resettable()" class="btn btn-primary"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
</form>
<button type="submit" class="btn btn-primary align-top m-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>,
您可以将父级添加到表单中。添加display:inline-block和width:fit-content，外部按钮将与表单对齐
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。