Question

我正在使用Bootstrap 4中的表单，并且我使用网格来确定输入框的宽度。我有5个输入框分割在md和更高的视口上：

col-md-2 col-md-2 col-md-2 col-md-2 col-md-4

然后我有一些jQuery隐藏第4列（addClass（＆＃39; d-none＆＃39;））并将第3列更改为col-md-4（removeClass（＆＃39; col-md-） 2＆＃39;）和addClass（＆＃39; col-md-4＆＃39;））。

我希望所有其他列保持相同的宽度和相同的位置，但由于某种原因，整个容器变小，所有元素都向左移动。你可以在这里看到我的意思的样本： https://codepen.io/ijamal/pen/qoQKPy

$("[name='search_type'").on("change", function (e) {
    if ($(this).val() == "oneway") {
        $("#return0").parent().addClass("d-none");
        $("#depart0").parent().removeClass("col-md-2");
        $("#depart0").parent().addClass("col-md-4");
    }
});`

Answer 1

尝试.closest()

$("#return0").closest('parent_element_here').addClass("d-none");

另外，一些动态CSS怎么能激发你的灵感？

这些样式适用于整个列。标题，正文和页脚可以单独设置。

此外，您可以在jQuery中使用这些动态名称

表格标题TH的CSS（第1列）

/* TABLE > "COLUMN" (..thead > tr > th) - HIDE/SHOW */
/* STYLE > (by ID) */
table thead tr th:nth-child(1) {

}

表体TD的CSS（第1列）

/* TABLE > "COLUMN" (..tbody > tr > td) - HIDE/SHOW */
/* STYLE > (by ID) */
table tbody tr td:nth-child(1) {

}

表格页脚TH的CSS（第1列）

/* TABLE > "COLUMN" (..tfoot > tr > th) - HIDE/SHOW */
/* STYLE > (by ID) */
table tfoot tr th:nth-child(1) {

}

Answer 2

结果显示＆lt; div class =“form-inline”＆gt;造成了这个问题。我最初在单个div（形式内联）中编码输入，但意识到我想控制宽度，因此移动到网格格式并忘记删除形式内联。这对宽度和间距造成了一定的破坏。

使用jQuery更改bootstrap 4中的列类

2 个答案: