Bootstrap表单内添加网格及提交后显示成功提示的实现方法

Bootstrap的网格系统和表单组件完全兼容，你只需要把表单元素嵌套进网格的row和col-*容器里，就能轻松实现多列表单布局。给你举个实用的例子：

<form>
  <!-- 第一行：两个并排的输入框（中等屏幕及以上各占一半宽度） -->
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="firstName" class="form-label">名字</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName" class="form-label">姓氏</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>

  <!-- 第二行：单独的输入框占满整行 -->
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email">
  </div>

  <!-- 第三行：标签和输入框分栏（标签占2列，输入框占10列） -->
  <div class="row mb-3">
    <label for="phone" class="col-sm-2 col-form-label">电话</label>
    <div class="col-sm-10">
      <input type="tel" class="form-control" id="phone">
    </div>
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

关键要点：

• 用row包裹每一行的表单元素，通过col-md-*、col-sm-*等类定义列宽，适配不同屏幕尺寸
• 搭配col-form-label类可以让标签和输入框的垂直对齐更美观
• 加入mb-3这类间距类，让表单元素之间保持合适的空隙

你可以通过JavaScript监听表单提交事件，阻止默认跳转行为，然后动态显示提示信息。这里用jQuery实现（Bootstrap项目通常都会引入jQuery），给你写个完整的方案：

首先修改表单，预留提示位置：

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

  <!-- 用flex布局让按钮和提示横向排列 -->
  <div class="d-flex align-items-center gap-2">
    <button type="submit" class="btn btn-primary">Submit</button>
    <!-- 初始隐藏提示，用Bootstrap的d-none类 -->
    <div id="successMsg" class="text-success d-none">Record Successfully saved</div>
  </div>
</form>

然后添加JavaScript逻辑：

$(document).ready(function() {
  $('#frm_myaccount').on('submit', function(e) {
    // 阻止表单默认提交跳转
    e.preventDefault();

    // 这里可以添加表单验证逻辑，比如检查输入是否合法
    const answer = $('#frm_answer').val().trim();
    if (!answer) {
      alert('请输入内容');
      return;
    }

    // 验证通过后显示提示
    $('#successMsg').removeClass('d-none');

    // 可选：3秒后自动隐藏提示
    setTimeout(function() {
      $('#successMsg').addClass('d-none');
    }, 3000);

    // 如果需要提交到后台，用AJAX实现：
    /*
    $.ajax({
      url: '你的后台接口地址',
      method: 'POST',
      data: $(this).serialize(),
      success: function() {
        $('#successMsg').removeClass('d-none');
        setTimeout(() => $('#successMsg').addClass('d-none'), 3000);
        // 重置表单（可选）
        $('#frm_myaccount')[0].reset();
      },
      error: function() {
        alert('保存失败，请重试');
      }
    });
    */
  });
});

注意事项：

• 用d-flex和gap-2保证按钮和提示的横向排列及间距
• 用text-success类给提示加上绿色文字，也可以换成alert alert-success做成提示框样式
• 如果是AJAX提交，记得在成功回调里处理提示逻辑，同时可以重置表单提升用户体验

内容的提问来源于stack exchange，提问作者espresso_coffee