html - 用于响应性的引导标签

Question

我四处搜索，我可能错过了一些东西，但我试图在输入表单上获取我的标签，以使用 Bootstrap 4.5 动态更改对齐边距。我的问题是我有一个包含四个输入块和一个按钮的表单，在列中（在一行中），它​​们是：

col-md-3 col-sm-12
col-md-3 col-sm-12
col-md-2 col-sm-12
col-md-2 col-sm-12
col-md-2 col-sm-12

因此，如果它是中等或更大的屏幕尺寸，每一列都会占据适当的数量，或者如果它很小，它们会一个接一个地显示在行中。我的问题是我在每个输入上方都有一个“标签”控件，并且随着大小在中小之间缩小，标签移动到两行，然后取消所有对齐，直到它在小视图中。

这是其中一行的示例 HTML：

<div class="row" id="rowSubTask0">
    <div class="col-md-3 col-sm-12"><label for="STName0">Sub Task Name:</label><input class="form-control" type="text" id="STName0" placeholder="Name" name="STName0"></div>
    <div class="col-md-3 col-sm-12"><label for="STDesc0">Sub Task Description:</label><input class="form-control" type="text" id="STDesc0" placeholder="Description" name="STDesc0"></div>
    <div class="col-md-2 col-sm-12"><label for="STDefaultHours0">Expected Hours:</label><input class="form-control" type="number" id="STDefaultHours0" placeholder="Default Hours" name="STDefaultHours0"></div>
    <div class="col-md-2 col-sm-12"><label for="STDefaultPrice0">Expected Price (Optional):</label><input class="form-control" type="number" step="0.01" id="STDefaultPrice0" placeholder="Default Price" name="STDefaultPrice0"></div>
    <div class="col-md-2 col-sm-12  align-self-end"><a href="javascript:void(0);" id="btnRemoveSub0" role="button" onclick="RemoveSubTask('rowSubTask0', 'Pipeline');"><i class="mdi mdi-minus-circle text-danger"></i> Delete</a></div>
</div>

我不确定如何解决这个问题？

查看图片以获得更好的解释：显示它在中、大、xl 等方面的外观，这就是我希望它的外观：

显示正确单词上的标签如何换行并导致其他标签的间距在中小之间看起来很有趣：

根据需要在小视图中显示它的外观：

任何帮助是极大的赞赏。

提前致谢。

标签： htmlcsstwitter-bootstrap

Answer 1

我已经尝试为您快速做一些事情，告诉我它是否符合您想要实现的目标。

基本上我放了两次标签并隐藏了我们不想要的标签。

.row {
  margin-bottom: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-none d-md-flex align-items-center bg-primary">
  <div class="col-3">Sub Task Name:</div>
  <div class="col-3">Sub Task Description:</div>
  <div class="col-2">Expected Hours:</div>
  <div class="col-2">Expected Price (Optional) this is to long:</div>
  <div class="col-2"></div>
</div>
<div class="row" id="rowSubTask0">
  <div class="col-md-3 col-sm-12"><label class="d-block d-md-none" for="STName0">Sub Task Name:</label><input class="form-control" type="text" id="STName0" placeholder="Name" name="STName0"></div>
  <div class="col-md-3 col-sm-12"><label class="d-block d-md-none" for="STDesc0">Sub Task Description:</label><input class="form-control" type="text" id="STDesc0" placeholder="Description" name="STDesc0"></div>
  <div class="col-md-2 col-sm-12"><label class="d-block d-md-none" for="STDefaultHours0">Expected Hours:</label><input class="form-control" type="number" id="STDefaultHours0" placeholder="Default Hours" name="STDefaultHours0"></div>
  <div class="col-md-2 col-sm-12"><label class="d-block d-md-none" for="STDefaultPrice0">Expected Price (Optional):</label><input class="form-control" type="number" step="0.01" id="STDefaultPrice0" placeholder="Default Price" name="STDefaultPrice0"></div>
  <div class="col-md-2 col-sm-12  align-self-end"><a href="javascript:void(0);" id="btnRemoveSub0" role="button" onclick="RemoveSubTask('rowSubTask0', 'Pipeline');"><i class="mdi mdi-minus-circle text-danger"></i> Delete</a></div>

</div>
<div class="row" id="rowSubTask0">
  <div class="col-md-3 col-sm-12"><label class="d-block d-md-none" for="STName0">Sub Task Name:</label><input class="form-control" type="text" id="STName0" placeholder="Name" name="STName0"></div>
  <div class="col-md-3 col-sm-12"><label class="d-block d-md-none" for="STDesc0">Sub Task Description:</label><input class="form-control" type="text" id="STDesc0" placeholder="Description" name="STDesc0"></div>
  <div class="col-md-2 col-sm-12"><label class="d-block d-md-none" for="STDefaultHours0">Expected Hours:</label><input class="form-control" type="number" id="STDefaultHours0" placeholder="Default Hours" name="STDefaultHours0"></div>
  <div class="col-md-2 col-sm-12"><label class="d-block d-md-none" for="STDefaultPrice0">Expected Price (Optional):</label><input class="form-control" type="number" step="0.01" id="STDefaultPrice0" placeholder="Default Price" name="STDefaultPrice0"></div>
  <div class="col-md-2 col-sm-12  align-self-end"><a href="javascript:void(0);" id="btnRemoveSub0" role="button" onclick="RemoveSubTask('rowSubTask0', 'Pipeline');"><i class="mdi mdi-minus-circle text-danger"></i> Delete</a></div>

</div>
<div class="row" id="rowSubTask0">
  <div class="col-md-3 col-sm-12"><label class="d-block d-md-none" for="STName0">Sub Task Name:</label><input class="form-control" type="text" id="STName0" placeholder="Name" name="STName0"></div>
  <div class="col-md-3 col-sm-12"><label class="d-block d-md-none" for="STDesc0">Sub Task Description:</label><input class="form-control" type="text" id="STDesc0" placeholder="Description" name="STDesc0"></div>
  <div class="col-md-2 col-sm-12"><label class="d-block d-md-none" for="STDefaultHours0">Expected Hours:</label><input class="form-control" type="number" id="STDefaultHours0" placeholder="Default Hours" name="STDefaultHours0"></div>
  <div class="col-md-2 col-sm-12"><label class="d-block d-md-none" for="STDefaultPrice0">Expected Price (Optional):</label><input class="form-control" type="number" step="0.01" id="STDefaultPrice0" placeholder="Default Price" name="STDefaultPrice0"></div>
  <div class="col-md-2 col-sm-12  align-self-end"><a href="javascript:void(0);" id="btnRemoveSub0" role="button" onclick="RemoveSubTask('rowSubTask0', 'Pipeline');"><i class="mdi mdi-minus-circle text-danger"></i> Delete</a></div>
</div>