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