Question

我需要你的帮助。我有一个输入字段，左侧有一个图标。我想要一个按钮（与输入字段的长度相同），左侧的图标和右侧的按钮。

这是输入字段的代码：

    <label for="basic-url"><b>Search</b></label>
    <div class="input-group input-group  mb-3">
      <div class="input-group-prepend">                                   
          <span class="input-group-text" id="basic-addon1"><i class="fa fa-search"></i></span>
      </div>
      <input id="idSearch" type="text" class="form-control" placeholder="Search..">
    </div>

Picture

Answer 1

首先，您需要使用 container > row > col 遵循引导程序“逻辑”，以确保规则正确应用。然后，您指定按钮的宽度 (.myButton)，测量搜索图标的宽度 (42px)，使它们对齐。最后，您在 input 元素中添加类 col，因此它将占用该行中剩余的可用空间。

index.html：

<div class="container-fluid">
  <div class="row d-flex">
    <button class="btn btn-outline-dark myButton">Btn</button>
    <input id="idSearch" type="text" class="form-control col" placeholder="Search..">
  </div>
</div>

styles.css：

.myButton {
  width: 42px;
}

P.S：附上的图片真的很有帮助！

左侧的图标和右侧的按钮

1 个答案: