html - 无法在 bootstrap 4.3.1 的输入中放置提交按钮

Question

正在使用 bootstrap 4.3.1，我正在尝试将提交按钮放置在输入中，并尝试了以下方法和更多形式的 stackoverflow。

因为我的输入是 rounded-pill 我需要将按钮放在输入字段中。

如何在输入框内放置按钮

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");

<div class="input-group col-md-4">
  <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" />
  <span class="input-group-append">
            
              <button type='submit' class="btn btn-primary rounded-circle">go</button>
            </span>
</div>

Answer 1

使用 absolute 将按钮绝对定位在输入字段内。还要添加 z-index 属性，以确保在您聚焦输入字段时它位于输入的顶部。

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
body {
  margin: 20px;
}

.input-group {
  position: relative;
}

.form-control {
  padding-right: 47px;
}

.input-group-append {
  position: absolute;
  right: 15px;
  z-index: 10;
}

<div class="input-group col-md-4">
  <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" />
  <span class="input-group-append">
      <button type='submit' class="btn btn-primary rounded-circle py-1">go</button>
  </span>
</div>