Question

我正在使用引导程序，并且已将输入内容放在自己的.form-group中。我所有的输入也都包含在一个.well类的div中。

我想删除引导程序为margin-bottom:15px提供的默认.form-group，但前提是其父项.form-group div中.well的最后一个实例。

<div class="well">
<div class="form-group">
    <div class="col-md-6">
        <div class="form-group">
            <label class="m-b-none">Name</label>
            <div class="input-group">
                <input class="form-control" name="Name">
                <div class="input-group-addon"><i class="fa fa-check-circle"></i></div>
            </div>
        </div>
        <div class="form-group">
            <label class="m-b-none">Surname</label>
            <div class="input-group">
                <input class="form-control" name="Surname">
                <div class="input-group-addon"><i class="fa fa-check-circle"></i></div>
            </div>
        </div>
    </div>
</div>

因此，我想删除每个margin-bottom类元素中的最后一个form-group上的well设置为0px。

我尝试了下面的代码，但它只是将样式应用于所有.form-groups

.well .form-group:last-of-type {
    margin-bottom: 0!important;
}

.well .form-group:last-of-type {
    margin-bottom: 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
  <div class="form-group">
    <input/>
  </div>
  <div class="form-group">
    <input/>
  </div>
</div>
<div class="well">
  <div class="form-group">
    <input/>
  </div>
  <div class="form-group">
    <input/>
  </div>
</div>

Answer 1

解决方案是为此使用引导程序。 mb-0是一个引导实用程序类，用于将margin-bottom设置为0。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
   <div class="form-group">
     <input/>
   </div>
   <div class="mb-0 form-group">
     <input/>
   </div>
</div>
<div class="well">
   <div class="form-group">
     <input/>
   </div>
   <div class="mb-0 form-group">
     <input/>
   </div>
</div>

有关mb-0的更多信息：What is class=“mb-0” in Bootstrap 4?

Answer 2

我尝试过的CSS选择器实际上有效。 HTML是使用某些C＃扩展方法生成的，但我还没有意识到所有输入都被包装在.form-group div中。 CSS选择器会将其视为last-of-type的{{1}}。一旦我删除了该div，选择器就会起作用。

.well

Answer 3

如果您不想添加课程，也可以直接使用:last-child选择器来完成。

.well .form-group:last-child {
     margin-bottom: 0!important;

}

Answer 4

您可以使用>指定类型.well的{{1}}的下一个孩子

div

具有类的最后一个元素的CSS选择器

4 个答案: