如何从 Bootstrap 4 表单上的错误消息中删除空格答案

【问题标题】：How do I remove white space from error message on Bootstrap 4 form如何从 Bootstrap 4 表单上的错误消息中删除空格
【发布时间】：2019-01-26 23:18:24
【问题描述】：

我在表单上使用 Bootstrap 4。 Bootstrap 正在添加白色空间，这让我的设计偏离了方向。我想摆脱间距。它出现在文本区域下方，当表单提交不正确时，它会出现在输入字段下方。我已经用谷歌搜索并检查了检查，但我仍然无法弄清楚究竟是什么导致了这个空间。

我确实发现，当我删除表单组类时，空格会消失，但错误消息也会消失，我不想摆脱错误消息。我在检查时注意到用户代理显示并且它似乎在边距底部添加了 1 rem 但我尝试过的任何事情都没有覆盖它。我尝试在 div 类和输入类上添加 mb-0 和 m-0 。我尝试在 CSS 表中的 help-block.with-errors、form-control、form-group 和 list-unstyled 上添加边距 0 和填充 0。

以下是表单提交前后的图片：

.form{
  width:97.6%;
  margin:0 auto;
}
input, textarea{
  font-size:14.5px;
  padding:8px;
  border-radius:6px;
  border:1px solid #676464;
  box-sizing:border-box;
  width:100%;
  margin:0;
}
input{
  height:36px; 
}    
textarea{
  height:200px;
}    
input[type=submit]{
  border-radius:6px;
  box-sizing:border-box;
  background:#2e2e2e;
  width:100%;
  padding:0;
  margin:0;
  color:#4f9190;
  font-size:22px;
  font-weight:normal;
}
.help-block.with-errors, .form-control, .form-group, ul.list-unstyled{
  color: #ff5050;
  margin:0;
  padding: 0;
 }

<!DOCTYPE html>
<html>
<head>
	<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">	
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">	
</head>
<body>
<form class="form" id="contact-form" method="post" action="contact.php" role="form">

                    <div class="messages"></div>

                    <div class="controls">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                     <div class="help-block with-errors"></div>
                                    <input id="form_name" type="text" class="" name="name" placeholder="*Name:" required="required" data-error="Name is required.">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                     <div class="help-block with-errors"></div>
                                     <input id="form_email" type="email" class="" name="email" placeholder="*Email:" required="required" data-error="Valid email is required.">
                                </div>
                            </div>
                            
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="help-block with-errors"></div>
                                    <textarea id="form_message" class="" name="message" placeholder="Questions, Message, Quote..."  required="required" data-error="Please, leave us a message."></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <input type="submit" class="" value="Send Message">
                            </div>
                        </div>
                        
                    </div>

                </form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>        
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</body>
</html>

【问题讨论】：

标签： twitter-bootstrap forms whitespace spacing

【解决方案1】：

尝试更改line-height property，请参阅下面我添加line-height: 15px;的代码示例

.help-block.with-errors, .form-control, .form-group, ul.list-unstyled {
 color: #ff5050;
 margin: 0;
 padding: 0;
 line-height: 15px;
}

这是输出：https://i.postimg.cc/VvpggtWJ/test.jpg

【讨论】：