css - Bootstrap 大利润低于帮助 block 类

Question

我正在使用 bootstrap 制作这个简单的表格，但是 .help-block 类下面似乎有很大的余量。如何在不影响响应能力的情况下删除它，或者我做错了什么？

.user-help {
		background: red;
		color: white;
		text-align: center;
	}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container'>
<form class='form-horizontal'>
    <div class='form-group'>
       <input id='fname' type='text' class='form-control' placeholder='First Name'>
       <div class='help-block user-help'>First name missing</div>
    </div>
    <div class='form-group'>
        <button type='submit' class='btn btn-primary btn-block'>Sign Up</button>
    </div>
</form>
</div>

Answer 1

应用 margin-bottom: 0; 到 .user-help 和 .form-group 指定它们的父 div 类。

.form-group .user-help {
  background: red;
  color: white;
  text-align: center;
  margin-bottom: 0;
}

.form-horizontal .form-group {
  margin-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container'>
  <form class='form-horizontal'>
    <div class='form-group'>
      <input id='fname' type='text' class='form-control' placeholder='First Name'>
      <div class='help-block user-help'>First name missing</div>
    </div>
    <div class='form-group'>
      <button type='submit' class='btn btn-primary btn-block'>Sign Up</button>
    </div>
  </form>
</div>