【问题标题】：How to add grid inside of the form in Bootstrap twitter?如何在 Bootstrap twitter 的表单内添加网格？
【发布时间】：2018-03-30 20:19:16
【问题描述】：

我有带有提交按钮的表单。一旦用户点击提交，我想在按钮旁边显示类似Record Successfully saved 的消息。这是我的表单示例：

<form name="frm_myaccount" id="frm_myaccount" class="frm-Submit" autocomplete="off">
    <div class="form-group required">
         <label class="control-label" for="answer">Answer</label>
         <input type="text" class="form-control" name="frm_answer" id="frm_answer" placeholder="Enter Answer" maxlength="100" required>
    </div>
    <div>
        <div class="col-xs-2">
             <button type="submit" class="btn btn-primary">Submit</button>
        </div>
        <div class="col-xs-10">
             <div id="myaccount-message" class="alert"></div>
        </div>
    </div>
</form>

上面的代码将提交按钮移到表单网格之外。我想知道表单内部是否使用任何类将元素组合在同一个网格中？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-form

【解决方案1】：

“表单网格外的提交按钮”

它仍然在表格网格内，但只有15px的边距

问题是

你给了你的button 类col-*-2，它给了它margin:15px

解决方案

从您的第二个form-group 中删除col-*-2
为成功消息添加JS，并为其赋予属性inline-block
重要- 从 .alert 类中删除填充

$('#frm_myaccount').submit(function(e) {
  $('#myaccount-message').append("<p style='line-height:0px; color:green; font-weight:700;'>Submit Recorded Successfully!</p>");

  e.preventDefault();
});

.alert {
  padding: 0px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.js"></script>
<form name="frm_myaccount" id="frm_myaccount" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="answer">Answer</label>
    <input type="text" class="form-control" name="frm_answer" id="frm_answer" placeholder="Enter Answer" maxlength="100" required>
  </div>
  <div class="form-group">
    <button style="display:inline;" type="submit" id="forrm" class="btn btn-primary">Submit</button>
    <div style="display:inline-block;" id="myaccount-message" class="alert"></div>
  </div>
</form>

【讨论】：