Question

我的系统中有多个位置，我想在提交按钮旁边显示消息。取决于用户活动，此邮件通常适用于'Records successfully saved'或'Invalid access'或'Invalid data entered in the form field'等系统。现在有了标准，我看到通常应该在提交按钮旁边显示该消息。当我第一次尝试在bootstrap中实现这个时，我遇到了警告框高度大于提交按钮高度的问题。我能够通过覆盖警报框div上的填充来解决这个问题。这是一个例子：

＆＃13;

$('#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();
  });
});

＆＃13;

.alert-Submit {
  padding: 5px 15px !important;
}

＆＃13;

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

＆＃13;

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

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＆amp; div代码您可以将项目放在彼此旁边，可以在class的左侧或右侧，具体取决于您的iframe。 此代码不需要引导才能正常工作。

网格内部的Bootstrap twitter按钮和警告框？

1 个答案: