Javascript 带“的额外空间；“论变革”；独自创立

更改“选择”菜单时，我希望更改其余选项。我在JQuery中使用show和hide添加了逻辑，但是仍然有很大的差距。我不知道该怎么做，因为如果我去掉行的div或引导网格系统的div，我的布局的其余部分就会变得一团糟

我在这里上传了网站：

当onchange或onclick一些文本框时，如何消除表单中的额外空间

<div class="row">
<div class="col-md-6">
  <h3> Database Details</h3>
  <select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected"><b>Oracle</b></option>
<option value="mssql"><b>Sql Server</b></option>
<option value="teraData"><b>TeraData</b></option>
<option value="epic"><b>Generic ODBC(Chronicles)</b></option>
 </select>
<br>
  <div id="dns">
 <label for="db_dns">DB DNS Name *</label>
 <input type="text" id="dnsText" name="url" class="form-control" required>
 </div>

 <div id="dbName">
<label for="dbName">Database Name</label>
  <input type="text" id="dbText" name="dbName" class="form-control">
 </div>

数据库详细信息
神谕
Sql Server
TeraData
通用ODBC（编年史）


数据库DNS名称*
数据库名称

我想你指的是填充物。 创建一个css类或放置一个填充少于引导默认值的样式属性。 i、 e

然后把这个类放在你的元素上。 例如：

---

与其将三个单独的div放在一起，为什么不将它们放在同一个div中，并按ID而不是div本身显示/隐藏实际字段和标签

不过，你需要将表单左侧的所有内容向上移动，因为下面的行在绑定到右侧时不会自行向上移动。只保留一个空div“slot”，然后使用JavaScript在字段和标签上使用CSS类显示/隐藏所需内容：

document.getElementById（“dbname1”）.setAttribute（“样式”，“显示：无；”）

当您希望它显示：

document.getElementById（“dbname1”）.setAttribute（“样式”，“显示：块；”）

您需要为标签指定一个ID，否则它将不适用于标签。
发布您希望获得反馈的特定代码块。您显示/隐藏的元素位于HTML中不同的
行中，将它们移到第一行。@DavidG如果我将它们全部移到第一行，则表单的右侧会乱七八糟。如果不将它们放在自己的行中，则可以。select元素所在的行有两列。右列具有更多选项，因此它将使行高变大，从而导致间隙。
.padding-5
{
 padding:5px;
}

<input type="text" class="form-control padding-5">