我已创建登录form。我想显示一个文字/按钮，显示“ FORGOT？”在密码字段的右侧。
作为参考，你们可以打开此站点并单击登录：https://www.adda247.com/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
<i class="fa fa-facebook"></i> Continue with Facebook
</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
<i class="fa fa-google"></i> Continue with Google
</button>
</div>
<br><br><br>
<div class="col-md-5 col-sm-5 col-xs-5" ></div>
<div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
<p class="form-control-feedback">Forgot?</p>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<p align="center" style="font-size:16px">Don't Have an Account?
<span ><a href="#" style="color: orange">SIgn Up</a></span>
</p>
</div>
</div>
</form>
希望你能帮助我！
答案 0 :(得分：0)
如果我理解正确的问题，这是解决方案？ 您只需要在CSS中操纵显示参数
<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
<i class="fa fa-google"></i> Continue with Google
</button>
</div>
<br><br><br>
<div class="col-md-5 col-sm-5 col-xs-5" ></div>
<div class="col-md-2 col-sm-2 col-xs-2"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
<input type="text" name="pass" class="form-control" style="height:40px; width: 90%; display: inline-block" placeholder="Password">
<a class="form-control-feedback" style="display:inline-block; width:5%" href="#">Forgot?</a>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<p style="font-size:16px">Don't Have an Account?
<span ><a href="#" style="color: orange">SIgn Up</a></span>
</p>
</div>
</div>
答案 1 :(得分：0)
在密码字段padding-right: 80px上添加填充
答案 2 :(得分：0)
将密码字段容器设置为use，然后设置“ FORGOT？”。提示position: relative和position: absolute（以便固定到其严格程度），然后根据需要使用CSS或bootstrap类进行设计（您仍然需要一些纯CSS，我使用了相同的{ {1}}和right: 1em作为示例）。
为避免重叠问题，我在“ FORGOT？”上设置了白色背景提示，这样就不会显示任何重叠的文本（也可以通过padding类添加它），但是可以在height上设置一个{FORGOT？ ”提示。
bg-whitepadding-right
我建议您不要使用<input>元素在项目之间创建空格，引导程序具有用于该类的类（例如具有.form-group.has-feedback {
position: relative;
}
.form-control-feedback {
position: absolute;
display: inline-block;
top: 1px;
right: 1em;
background: #fff;
bottom: 0;
margin: 0;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
border-radius: 3px;
}的类）。
答案 3 :(得分：0)
我已经使用相对位置和绝对位置方法在输入框中移动按钮。
删除br并使用mt-和mb-值在引导程序4中获得间距。
.form-group.has-feedback {
position: relative;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 15px;
padding: 6px 8px 9px 8px;
display: inline-block;
}
.form-group.has-feedback .form-control {
padding: 0 70px 0 0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 mb-3">
<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
<i class="fa fa-facebook"></i> Continue with Facebook
</button>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 mb-3">
<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
<i class="fa fa-google"></i> Continue with Google
</button>
</div>
<div class="col-md-5 col-sm-5 col-xs-5"></div>
<div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div>
<div class="col-md-12 col-sm-12 col-xs-12 my-3">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
<p class="form-control-feedback">Forgot?</p>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 mb-3">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<p align="center" style="font-size:16px">Don't Have an Account?
<span><a href="#" style="color: orange">SIgn Up</a></span>
</p>
</div>
</div>
</form>