时间戳

首页 > 解决方案 > bootstrap-4 列显示中断与 javascript style.display = "block"

javascript - bootstrap-4 列显示中断与 javascript style.display = "block"

问题描述

我的 div 在开始时在 1 行中正确显示。

但是，一旦用户将我的选择选项更改为 b，然后返回 a。显示中断。两个文本“我的左侧文本”和“我的右侧文本”显示在另一个下方的 2 行 1 中，而不是 1 （在他们来回切换选项之前最初的样子）。我该如何解决这个问题提前谢谢

<select id = 'test'>
<option>a</option>
<option>b</option>
</select>
<div id = 'row_contanier1' class = 'form-group row'>
<p class = 'col-sm-2 col-form-label'>my left side text </p>
<p class = 'col-sm=10'> my right text </p>
</div>

javascript/jquery 下面

$(document).ready(function){
    $(#test).change(function(){
        var index = document.getElementById('test').selectedIndex;
        
        if(index ==1){
            document.getElementById('row_contanier1').style.display = "none";
        }
        else{
            document.getElementById('row_contanier1').style.display = "block";
        }
    });
});

编辑：抱歉 jquery 代码之前被截断了

标签： javascripthtmljquerybootstrap-4

解决方案

.row 有display flex（在引导程序中）

更改您的代码document.getElementById('row_contanier1').style.display = "flex";

或使用 css 类

if(index ==1){
  document.getElementById('row_contanier1').classList.add('d-none');
}
else{
  document.getElementById('row_contanier1').classList.remove('d-none');
}

推荐阅读