Question

正在工作的Bootstrap 4.3.1，我正在尝试将Submit按钮放置在输入中，并尝试使用以下方法和更多表格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

添加此

.input-group-append {
    position: absolute;
    right: 0;
}
.x__p__address__x {
    padding-right: 40px;
}

Answer 2

使用绝对值将按钮绝对定位在输入字段内。还要添加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>

无法在Bootstrap 4.3.1的输入中放置提交按钮

2 个答案: