时间戳

首页 > 解决方案 > 如何在表单组和表单行类（引导程序 4）中内联输入字段旁边的按钮？

twitter-bootstrap - 如何在表单组和表单行类（引导程序 4）中内联输入字段旁边的按钮？

问题描述

我正在为表单字段中的引导类而苦苦挣扎。

当我想在输入字段旁边添加一个内联按钮时，它会 - 低于输入或不会保持内联（行高明智）。

我想在密码字段旁边有一个按钮。我已经在使用 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

标签： twitter-bootstrapbuttonbootstrap-4

解决方案

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

推荐阅读