使用 bootstrap 更改按钮的位置

Question

当我尝试使用 bootstrap 在输入字段中放置按钮时，我遇到了一些困难。表单域中的按钮居中，但我想将其向右推一点，使其看起来与设计完全一样。

我试过使用 CSS，但是当我在我的移动设备上查看网站时，按钮偏离了位置并移过了容器。有人可以帮我解决这个问题吗？这是我用 bootstrap.

编写的代码

<div class="input-group mt-5 mb-3">
    <input type="text" class="email mx-auto" placeholder="Enter Your Email Address">
    <button class="position-absolute top-50 start-50 translate-middle btn btn-primary" type="button" id="letterbtn">Signup</button>
</div>

我发布的 bootstrap 代码将按钮放在中间

Answer 1

使用修改后的代码：

<form>
   <div class="form-group custom-form">
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Your Email Address">
        <button class="signup-btn">Signup</button>
    </div>
</form>

.form-group.custom-form {
    position: relative;
    margin: 0 auto;
    width: 40%;
}
.form-group.custom-form input {
    padding: 0 0 0 14px;
    height: 50px;
}
button.signup-btn {
    position: absolute;
    top: 8px;
    right: 15px;
    background: #1d4cb9;
    color: #fff;
    border: 0;
    padding: 5px 15px 5px 14px;
    border-radius: 5px;
}

使用 bootstrap 更改按钮的位置

Changing the position of a button using bootstrap

css

twitter-bootstrap