Question

想象一下以下简单形式：

<div class="d-flex justify-content-center" style="direction: ltr">
            <form class="form-inline flex-fill">
              <div class="input-group input-group-lg flex-fill mx-3">
                <input type="text" class="form-control form-control-lg text-center" placeholder="" />
                <div class="input-group-append">
                  <button type="button" class="btn btn-warning"><i class="fas fa-search text-muted"></i></button>
                </div>
              </div>
            </form>
          </div>

如果将元素插入额外的

内，它将无法正确显示。像

引导程序样式似乎期望输入是输入组的直接子级。您如何在Bootstrap 4中解决此问题？

1 个答案:

答案 0 :(得分：1)

Answer 1

我不确定我是否完全了解此用例的需要...指定.form-inline，然后要使用全角.input-group，但采用的设计方式超出了该组件？这很奇怪，但是可以做到！

此更改的重量级为.form-control和.w-100。因为您要对基本表单应用.form-inline，所以所有各种表单元素的行为都将只占用绝对必要的宽度； .w-100告诉他们全部采取行动。

将.form-control应用于包装器<div>，Bootstraps CSS知道如何处理此意外元素，但会导致与子级<input>的冲突，您需要使用一些额外的参数来覆盖它们课程。

在.form-control上，您需要删除所有填充，而在<input>上，您需要删除...基本上所有内容。您需要删除其默认边框（.border-0），添加一个.rounded类，以避免矩形输入被裁剪到.form-control中。您需要使其占用其父代宽度和高度的100％（分别为.w-100和.h-100）

即使采用默认模式，与:focus组件的功能相比，.input-group效果仍然会有一点不一致。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form class="form-inline p-3">

<div class="input-group input-group-lg w-100">
  <div class="form-control p-0"><input type="text" class="border-0 rounded w-100 h-100 text-center"></div>
  <div class="input-group-append">
    <button type="button" class="btn btn-warning"><i class="fas fa-search text-muted"></i></button>
  </div>
</div>

</form>

如何将<input>标记放入bootstrap 4 form-inline中的额外div中？

1 个答案: