引导 twitter 按钮和网格内的警报框？

Question

我的系统中有多个位置希望在提交按钮旁边显示消息。取决于用户活动，此消息对于系统通常是通用的，例如 '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>

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

Answer 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;" 应放置在您要对齐的两个 div 的外部 和 内部 要对齐的元素所在的 div 之内。

使用align 和clear 代码，您可以将项目彼此相邻放置，根据您的class，在div 的左侧或右侧。 此代码不需要需要引导程序才能工作。