引导行跨度，删除行之间的空格答案

【问题标题】：Bootstrap rowspan, remove empty spaces between rows引导行跨度，删除行之间的空格
【发布时间】：2019-10-18 01:39:27
【问题描述】：

我想在我的表单中添加一个容器。容器高度约为 4 引导行。将容器放入第一行的第二列后，第一行的第一列下方会出现一个空白。是否可以删除该空白？这就是我实现表单的方式。（分成两个 col-6 列不是解决方案，它在移动视图时不起作用）。 jsfiddle exmple

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input class="form-control" placeholder="Name" name="Name" required>
    </div>
    <div class="col-md-2"></div>
    <div class="col-sm-4">
        <div style="width: 100% ; height: 250px; background-color: black;">
        </div>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
    <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
    <div class="col-sm-4">
        <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
    </div>
</div>

我想删除标记的空格，如下图所示：

【问题讨论】：

请问为什么它在移动视图时不起作用？
为什么要在行之间使用额外的 div.. 请删除 tat

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

为 md 及以上尺寸添加以下样式块...

@media screen and (min-width:768px){
  .toggleDiv{ position:absolute; right:0; }
}

在下面工作 sn-p：

@media screen and (min-width:768px) {
  .toggleDiv {
    position: absolute;
    right: 0;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input class="form-control" placeholder="Name" name="Name" required>
  </div>
  <div class="col-md-2"></div>
  <div class="col-sm-4 toggleDiv">
    <div style="width: 100% ; height: 250px; background-color: black;">
    </div>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
  <label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
  <div class="col-sm-4">
    <input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
  </div>
</div>

【讨论】：

谢谢伙计...你让我开心... :)