css - 网格内的Bootstrap Twitter按钮和警报框？

我的系统中有多个位置，我想在“提交”按钮旁边显示消息。根据用户活动，此消息通常对于'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>

在示例中，您可以看到我尝试使用两个网格将提交按钮和警报框彼此相邻放置。当警报框不能放在按钮旁边时，我只想更改两个网格之间的填充。在示例中，您可以看到它们之间没有空间。在小屏幕上这看起来很难看，我想知道放置空间的最佳方法是什么？我也想知道是否有更好的方法以自举形式在按钮旁边的警报框中显示消息？

最佳答案

要在按钮旁边显示警报，可以使用一些简单的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代码，您可以根据div将项目彼此相邻放置，紧靠class的左侧或右侧。此代码不需要引导程序即可工作。

关于css - 网格内的Bootstrap Twitter按钮和警报框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49633243/