如何在form-group和form-row类（引导4）中的输入字段旁边内嵌按钮？

Question

我正在努力与表单字段中的引导类。

当我想在输入字段旁边添加一个内联按钮时，它要么-进入输入下方，要么不会保持内联（明智的方式是行高）。

我想在密码字段旁边有一个按钮。 我已经在使用form-row和form-group类来组织输入，但是不介意使用其他类，只要其效果与我现在所使用的相同或相似即可。

参见下面的代码：

<div class="card mt-4">
  <div class="card-body">
    <form>
      <div class="form-row">
      <div class="form-group col-12 col-md-4">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email" autocomplete="off">
      </div>
      <div class="form-group col-12 col-md-4">
        <label for="password">Password</label>
        <input type="password" class="form-control mr-1" id="password" placeholder="Password" autocomplete="new-password">
          <div class="form-group input-group-btn col-12 col-md-4">
            <button type="button" class="btn btn-primary"> Go! </button>
          </div>
    </div>
  </div>
  </form>
  </div>
</div>

并链接到Codepen： https ：//codepen.io/anon/pen/MNoPdX

Answer 1

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="card mt-4"> <div class="card-body"> <form> <div class="form-row"> <div class="form-group col-12 col-md-4"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Email" autocomplete="off"> </div> <div class="form-group col-12 col-md-4"> <label for="password">Password</label> <input type="password" class="form-control mr-1" id="password" placeholder="Password" autocomplete="new-password"> </div> <div class="form-group col-12 col-md-4" style="margin-top:30px"> <button type="button" class="btn btn-primary"> Go! </button> </div> </div> </form> </div> </div>