用bootstrap,下面这个布局怎么实现?
本文介绍了用bootstrap,下面这个布局怎么实现?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
下面如图,用bootstrap 3.3.5,把这个按钮放在右边应该怎么实现?
一行是12个格子啊,我试了很多种方法都不行~
界面:
代码:
<link rel="stylesheet" type="text/css" href="__PUBLIC__/themes/{$Think.config.DEFAULT_THEME}/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signup {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<form id="signupForm" class="form-horizontal form-signup">
<h1 class="page-header"> <span class="glyphicon glyphicon-user"></span> 用户注册</h1>
<div class="form-group" style="max-width: 530px;">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">请输入</span>
<input id="user_mail" name="user_mail" type="email" class="form-control" placeholder="请输入手机号" aria-describedby="basic-addon1" required="" autofocus="">
</div>
<div class="input-group">
<input id="btnGetVerCod" type="button" class="form-control btn btn-info" value="获取验证码">
</div>
</div>
</div>
解决方案
<input id="btnGetVerCod" type="button" class="form-control btn btn-info pull-right" value="获取验证码">
加上pull-right就可以了。
试了下的确不行,按钮与text分不开,只能按下面代码改
<div class="form-group" style="max-width: 530px;">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">请输入</span>
<input id="user_mail" name="user_mail" type="email" class="form-control" placeholder="请输入手机号" aria-describedby="basic-addon1" required="" autofocus="">
<!--<input id="btnGetVerCod" type="button" class=" btn btn-info pull-right" value="获取验证码">-->
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
获取验证码
</button>
</span>
</div>
</div>
</div>
这篇关于用bootstrap,下面这个布局怎么实现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文