用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>

display:inline;float：right；

<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>

参考 http://moyuyc.xyz/autoexam?reg

【热门文章】