无法在 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

添加这个

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

Answer 2

使用 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>