我没有使用 bootstrap 的经验,我遇到过如下图所示的情况:
在第一张图片中显示了输入“manipuleo”,但在第二张图片中我隐藏了它。我想用下一个输入(在本例中是“Impuesto Producto”)填充第二个图像中的空白区域。我正在使用 Bootstrap 和 jquery,这可能吗?
我向您展示了我使用的代码结构:
我没有使用 Bootstrap 的经验,我遇到过如下图所示的情况:在此处输入图片描述
在第一张图片中显示了输入“manipuleo”,但在第二张图片中我隐藏了它。我想用下一个输入(在本例中是“Impuesto Producto”)填充第二个图像中的空白区域。我正在使用 bootstrap 和 jquery,这可能吗?
我向您展示了我使用的代码结构:
@ControlGAS.Office.Resources.Resources.ControlGAS.ComplementaryData
<div id="SectionCommonInputs">
<div class="form-group form-material floating row">
<div id="OptHazardousCLSId" style="display:none" class="col-md-4">
</div>
<div id="OptWasteMgmtCLSId" style="display:none" class="col-md-4">
</div>
<div id="OptHandlingSpecialSCLSId" style="display:none" class="col-md-4">
</div>
</div>
<div class="form-group form-material floating row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
最佳答案
使用这个结构:
<form action="">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="select_id_1"></label>
<select name="" id="select_id_1"></select>
<select name="" id=""></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_id_2"></label>
<select name="" id="select_id_2"></select>
<select name="" id=""></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="select_id_3"></label>
<select class="d-none" name="" id="select_id_3"></select>
<select name="" id=""></select>
</div>
</div>
</div>
</form>
所以它并不完全是您所拥有的,但它向您展示了如何对结构进行排序。建议您为每个输入都指定一个标签,就像这样:
<div class="form-group">
<label for="select_id_1_a"></label>
<select name="" id="select_id_1_a"></select>
<label for="select_id_1_b"></label>
<select name="" id="select_id_1_b"></select>
</div>
所以当你想隐藏一个特定的输入时,只需给它和它的标签一个“d-none”类(bootstrap 4+)
关于html - 隐藏输入时 Bootstrap 填充间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54346621/