Как удалить пробел из сообщения об ошибке в форме Bootstrap 4 - PullRequest
Новая
       60

Как удалить пробел из сообщения об ошибке в форме Bootstrap 4

0 голосов
/ 27 января 2019

Я использую Bootstrap 4 в своей форме.Bootstrap добавляет пробел, который отбрасывает мой дизайн.Я хотел бы избавиться от расстояния.Он отображается под текстовой областью, а при неправильной отправке формы - под полями ввода.Я гуглил и проверил осмотр, но я все еще не могу понять, что именно вызывает пространство.

Я выяснил, что когда я удаляю класс группы форм, пробел исчезает, но сообщение об ошибке исчезает, я не хочу избавляться от сообщения об ошибке.При осмотре я заметил, что пользовательский агент показывает, и кажется, что он добавляет 1 бэр к нижней части поля, но опять же, ни одна из вещей, которые я пробовал, не изменила его.Я попытался добавить mb-0 и m-0 в класс div и входной класс.Я попытался добавить поле 0 и заполнить 0 на help-block.with-errors, form-control, form-group и list-unstyled на листе css.

Вот изображения формы до и после отправки формы:
http://i68.tinypic.com/105wa9t.png
https://i.postimg.cc/6p3Wj3jz/form2.jpg

.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>

1 Ответ

0 голосов
/ 18 февраля 2019

Попробуйте изменить свойство line-height , см. Мой пример кода ниже, где я добавил 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

...