Question

我希望输入字段位于同一行。但是我不知道我在做什么错。有人可以帮我吗？我正在使用Bootstrap 4。

html代码

<body>

  <div class="container h-100">
    <div class="row">
      <div class="col-12">
          <div id="content">
            <h1>Contact Page</h1>
            <h3>Contact Us</h3>
            <hr>
          </div>
      </div>
    </div>
  </div> 
      <div class="container">
        <div class="row">
          <div class="col-sm-6 offset-md-3">
            <form class="form-group">
              <div class="form-inline">
                <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
              </div>              
            </form>
          </div>
          <div class="col-md-6 offset-md-3">
            <form class="form-group">
              <div class="form-inline">
                 <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
              </div>              
            </form>
            <button type="submit" class="btn btn-default">Send invitation</button>
          </div>
        </div>
      </div>

Answer 1

重组您的表格。 -为此表格使用一个标签。不要为每个输入都使用一个表单标签。 -使用class form-inline删除div。 -使用class =“ col-md-6 offset-md-3”将类form-inline添加到div。

Answer 2

在代码中添加“表格行” 或“行” 。

<form>
  <div class="container">
    <div class="form-row">
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group mx-sm-3 mb-2">
        <button type="submit" class="btn btn-default">Send invitation</button>
      </div>
    </div>

  </div>
</form>

OR

<form>
  <div class="container">
    <div class="row">
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
      </div>
    </div>
    <div class="row">
      <div class="form-group mx-sm-3 mb-2">
        <button type="submit" class="btn btn-default">Send invitation</button>
      </div>
    </div>
  </div>
</form>

Answer 3

  <div class="container">
  <form>
      <div class="form-inline">
          <div class="form-group mx-sm-3 mb-2">
            <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
         </div>
         <div class="form-group mx-sm-3 mb-2">
             <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
         </div>
      </div>
     <div class="form-group mx-sm-3 mb-2">
         <button type="submit" class="btn btn-default">Send invitation</button>
     </div>
 </form>  
 </div>

行或窗体行并不重要。行形式改变了装订线。这是您自己的偏好。

网格系统Boostrap 4-在线

3 个答案: