У меня есть несколько мест в моей системе, где я хотел бы показать сообщение рядом с кнопкой отправки. В зависимости от активности пользователя это сообщение обычно является общим для системы, например 'Records successfully saved' или 'Invalid access' или 'Invalid data entered in the form field'. Со стандартами сегодняшнего дня я вижу, что сообщение обычно должно отображаться рядом с кнопкой отправки. Когда я впервые попытался реализовать это в бутстрапе, у меня возникла проблема, когда высота окна предупреждения больше, чем высота кнопки отправки. Я смог решить эту проблему, перезаписав отступы в div окна предупреждения. Вот пример:
$('#frm_myform').on('click', function() {
$('#my-message').show().addClass('alert-success').html('Record successfully saved.').delay(10000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
});
});.alert-Submit {
padding: 5px 15px !important;
}<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-home"></span> <b>Home Page</b></div>
<div class="panel-body">
<form name="frm_myform" id="frm_myform" class="frm-Submit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="answer">Answer</label>
<input type="text" class="form-control" name="frm_answer" id="frm_answer">
</div>
<div class="row">
<div class="col-md-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-11">
<div id="my-message" class="alert alert-Submit"></div>
</div>
</div>
</form>
</div>
</div>В примере вы можете видеть, что я попытался использовать две сетки, чтобы разместить кнопку отправки и окно предупреждения рядом друг с другом. Единственное, что я хотел бы изменить, это отступы между двумя сетками, когда окно предупреждения не помещается рядом с кнопкой. В примере вы можете видеть, что между ними нет пробела. На маленьком экране это кажется уродливым, и мне интересно, как лучше всего разместить немного места? Также мне интересно, есть ли лучший подход для отображения сообщения в окне предупреждения рядом с кнопкой в форме начальной загрузки?
