我想在我的表单中添加一个容器。容器高度约为 4 行 Bootstrap 。一旦我将容器放入第一行的第二列，第一行的第一列下方就会出现一个空白。是否可以删除该空白区域？ 这就是我实现表单的方式。 (分为两个 col-6 列不是解决方案，它在移动 View 中不起作用)。 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>我想删除标记的空格，如下图所示:
最佳答案
为 md 及以上尺寸添加以下样式 block ...
@media screen and (min-width:768px){
.toggleDiv{ position:absolute; right:0; }
}
下面的工作片段:
@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>关于html - Bootstrap rowspan，删除行之间的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58442816/