无法在表单中对齐引导程序提交按钮？答案

【问题标题】：Cannot align bootstrap submit button in form?无法在表单中对齐引导程序提交按钮？
【发布时间】：2018-02-06 23:46:08
【问题描述】：

我使用了引导表单，但提交按钮未在表单中的名称和编号字段下方对齐。我尝试使用各种 css 样式，但无法对齐。请参阅屏幕截图提交按钮未正确对齐。

在 app.js 中：

    function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `
        <form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        `;
}

在 index.css 中：

.form-group{
    padding-left: 30px;
    padding-right: 30px;
}

.form .btn-primary{
    padding-left: 30px;
}

我也尝试将提交按钮包裹在 div 标签内，但仍然没有效果。

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

form .btn-primary{
    margin-left: 30px;
}

not .form 这也应该是边距，否则文本将移动 30 像素，但按钮仍保留在同一位置

【讨论】：

以防万一有人想查看 CSS 的盒模型规范，developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/…

【解决方案2】：

除了向.form-group 和.btn 添加填充之外，您可以做的是向表单本身添加填充，只需向表单添加一个类并针对它添加css。

工作示例 -

function editContact(id) {
    document.getElementById("editcontact").innerHTML = 
        `
        <form class="form">
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        `;
}

editContact(1);

.form{
  padding: 0 30px;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id="editcontact">
      
    </div>  
  </body>

</html>

注意，我添加了.form 类，并添加到它。这是上面sn-p的一个plunker https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview

【讨论】：

【解决方案3】：

form-group div 内的包装按钮（新） P.S 在扩展的 sn-p 视图中尝试这个 sn-p

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>

【讨论】：

在某些情况下，将表单控件放在<span></span> 或引导程序.col-*-* 中是有意义的。 .form-group 类可以工作，但就语义而言，在这种情况下被滥用。我们希望.form-group 内有某种输入元素和标签元素，而不是按钮。
谢谢@MarkCarpenterJr 我会记住的。（这是一种不好的做法）