用bootstrap，下面这个布局怎么实现？

发布于 2022-09-02 14:37:10 字数 1926 浏览 8 评论 0

下面如图，用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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑着哭最痛 2022-09-09 14:37:10

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

回复收藏 0