html - 隐藏输入时 Bootstrap 填充间隙

Question

我没有使用 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>

Answer 1

使用这个结构:

<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+)