输入标签内的添加按钮

时间：2019-04-23 08:09:59

标签： css bootstrap-4

我已创建登录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>&nbsp;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>&nbsp;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>

希望你能帮助我！

4 个答案:

答案 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>&nbsp;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-white
padding-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>&nbsp;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>&nbsp;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>

相关问题
最新问题