html - Bootstrap 4 : put inputs horizontal

Question

我是 Bootstrap 4 的新手，需要一些帮助。我希望我的前两个输入字段在同一行(水平)而不是它们之间。像这样:

enter image description here

这是我的 HTML 代码:

  <div class="container">
    <div class="row">         
      <div class="form-group col-md-6 offset-md-3">             
        <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
      </div>        
      <div class="form-group col-md-6 offset-md-3">
        <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
      </div>
      <div class="form-group col-md-6 offset-md-3">
        <textarea class="form-control transparent-input" cols="20" rows="10" placeholder="Enter your message"></textarea>              
      </div>
    </div>
    <div class="row">
      <div class="form-group col-md-6 offset-md-3">
        <button type="button" class="btn btn-primary">Send</button>
        <!--<button type="submit" class="btn btn-default">Send invitation</button>-->
      </div>
    </div>
  </div>

有人可以帮帮我吗？

Answer 1

请试试这个方法。我希望你能得到你想要的风格。

<div class="container">
        <div class="row">
            <div class="form-group col-md-6">
                <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
            </div>
            <div class="form-group col-md-6">
                <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
            </div>
            <div class="form-group col-md-12">
                <textarea class="form-control transparent-input" cols="20" rows="10" placeholder="Enter your message"></textarea>
            </div>
            <div class="form-group col-md-12">
                <button type="button" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>