0

我的系统中有多个地方我想在提交按钮旁边显示消息。取决于用户活动，此消息通常适用于系统，如'Records successfully saved'or'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>

在示例中，您可以看到我尝试使用两个网格将提交按钮和警报框放在一起。我唯一想改变的是当警报框不能放在按钮旁边时，两个网格之间的填充。在示例中，您可以看到它们之间没有空格。这在小屏幕上看起来很丑，我想知道放置一些空间的最佳方式是什么？另外我想知道是否有更好的方法可以在引导表单中按钮旁边的警报框中显示消息？

4

1 回答 1

1

要在按钮旁边显示警报，您可以使用一些简单的 css 将它们对齐：

CSS：

.align-left { float: left; }
.align-right { float: right; }

HTML：

<div class="row">
  <div class="col-md-1">
    <button type="submit" class="btn btn-primary align-left">Submit</button>
  </div>
  <div class="col-md-11">
    <div id="my-message" class="alert alert-Submit align-left"></div>
  </div>
  <div style="clear: both;"></div>
</div>

"clear: both;"应放置在您要对齐的两个's之外，以及要对齐的元素所在的 's 之内。divdiv

使用align&clear代码，您可以将项目彼此相邻放置，div根据您的class. 此代码不需要引导程序即可工作。

于 2018-04-03T15:38:49.760 回答