Question

我使用了bootstrap表单但是提交按钮没有在表单中的Name和Number字段下面对齐。我试图使用各种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标记内包装提交按钮，但仍无效果。

Answer 1

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

不.form这也应该是边距，否则文本会移动30像素，但按钮保持在同一个地方

Answer 2

不是向.form-group和.btn添加填充，而是将填充添加到表单本身，只需向表单添加一个类并向其添加css。

工作示例 -

＆＃13;

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

＆＃13;

.form{
  padding: 0 30px;
}

＆＃13;

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

＆＃13;

注意，我添加了.form类，并添加了它。以下是上述代码段https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview

的摘要

Answer 3

在form-group div（new）中包装按钮P.S在扩展的片段视图中尝试此片段

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

无法在表单中对齐bootstrap提交按钮？

3 个答案: