如何在onclick后使其成为一行

Question

我的 html 中有一个 div：

.row(id="div_amount")
  .col-sm-2
    label(for="amount") Amount:
  .col-sm-1
    input(type="text", name="amount")

正如我所期望的那样完美。两个元素都显示在一行中。

我有一个单选按钮，其中有一个 onclick 事件用于切换此 div 部分的显示。

function div_toggle() {
  div_amount = document.getElementById('div_amount');

  if (radio_value === 0) {
    div_amount.style.display = "block";
  } else {
    div_amount.style.display = "none";  
  }
}

但是，单击单选按钮后，它始终显示为两行。

如何修复它以始终显示在一行中？

Answer 1

在

bootstrap4

中，

row

显示为

flex

，即“display: flex;”。因此，在 JavaScript 中，如果将其更改为显示为

block

，则该行中的列将会被破坏。

您可以将其显示设置为

flex

，例如

if (radio_value === 0) {
    div_amount.style.display = "flex";
} else {
    div_amount.style.display = "none";  
}

尽管在 JavaScript 中设置 HTML 元素样式在 IMO 中被认为是不好的做法。