如何去除联系表单多余内边距？HTML/Bootstrap表单样式调整求助

嘿，我来帮你逐一搞定这三个表单调整的小问题，都是Bootstrap表单常见的小坑，很容易解决！

1. 去除表单多余内边距 #

Bootstrap的.form-group默认带有margin-bottom，而.col-md-*类也自带左右内边距（padding），这两个是导致多余间距的主要原因。你可以通过自定义CSS精准覆盖：

/* 去除form-group的底部外边距 */
.custom-form .form-group {
  margin-bottom: 0;
}
/* 可选：去除列的左右内边距，根据你的布局需求调整 */
.custom-form .col-md-3 {
  padding-left: 0;
  padding-right: 0;
}

记得给你的表单容器加上custom-form类，这样不会影响页面上其他表单的样式。

2. 设置红色全屏宽度的提交按钮 #

Bootstrap自带了让按钮占满父容器宽度的btn-block类，红色按钮可以用内置的btn-danger（如果觉得颜色不够深，也可以自定义）。直接这样写按钮：

<button type="submit" class="btn btn-danger btn-block mt-3">提交</button>

• btn-danger：自带Bootstrap标准红色背景样式
• btn-block：让按钮自动铺满父容器宽度
• mt-3：可选，给按钮加个顶部间距，避免和输入框贴得太近

如果想要自定义红色色调，就加个专属CSS类：

.btn-custom-red {
  background-color: #ff2a2a; /* 自定义亮红色 */
  border-color: #ff2a2a;
  color: #fff;
}

然后按钮用class="btn btn-custom-red btn-block"即可。

3. 修复输入框的布局问题 #

你现在的代码把“姓名/电话”和“邮箱/咨询内容”拆成了两个独立的.row，所以不管屏幕宽度怎么变，它们都会强制分两行显示。要让四个输入框在中等屏幕上并排、小屏幕自动堆叠，应该把所有.col-md-3放在同一个.row里：

<form class="custom-form">
  <div class="row">
    <!-- 姓名 -->
    <div class="col-md-3">
      <div class="form-group">
        <label for="form_name">Your Name *</label>
        <input id="form_name" type="text" name="name" class="form-control" required="required" data-error="Name is required.">
        <div class="help-block with-errors"></div>
      </div>
    </div>
    <!-- 电话 -->
    <div class="col-md-3">
      <div class="form-group">
        <label for="form_lastname">Your Phone *</label>
        <input id="form_lastname" type="text" name="surname" class="form-control" required="required" data-error="Lastname is required.">
        <div class="help-block with-errors"></div>
      </div>
    </div>
    <!-- 邮箱 -->
    <div class="col-md-3">
      <div class="form-group">
        <label for="form_email">Email *</label>
        <input id="form_email" type="email" name="email" class="form-control" required="required" data-error="Valid email is required.">
        <div class="help-block with-errors"></div>
      </div>
    </div>
    <!-- 咨询内容 -->
    <div class="col-md-3">
      <div class="form-group">
        <label for="form_message">Message *</label>
        <textarea id="form_message" name="message" class="form-control" required="required" data-error="Please leave a message."></textarea>
        <div class="help-block with-errors"></div>
      </div>
    </div>
  </div>
  <!-- 提交按钮 -->
  <button type="submit" class="btn btn-danger btn-block mt-3">提交</button>
</form>

这样在屏幕宽度≥768px（Bootstrap的md断点）时，四个输入框会并排显示；屏幕缩小后，会自动堆叠成一列，完全符合响应式布局的需求。

把这些调整结合起来，你的表单就能完美符合预期啦！

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