将某些字段从表单移动到右侧

时间:2016-10-28 09:49:54

标签: html css

所以我正在建立一个网站,现在我得到了一个注册表格,我可能也只是让它看起来像地址等的东西出现在右边,个人信息留在左边。

截至目前我已经

<section id="form"><!--form-->
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-1">
                <div class="login-form"><!--login form-->
                    <h2>Login to your account</h2>
                    <form method="post">

                   <div id="login-error"></div>

                        <input id="login-mail" type="email" placeholder="Email Address" />
                        <input id="login-pass" type="password" placeholder="Password" />

                        <button id="login-     submit" type="submit" class="btn btn-default">Login</button>
                    </form>
                </div><!--/login form-->
            </div>
            <div class="col-sm-1">
                <h2 class="or">OR</h2>
            </div>
            <div class="col-sm-4">
                <div class="signup-form"><!--sign up form-->
                    <h2>New User Signup!</h2>
                    <form name="signup-form" action="/register" method="post" >
                        <input required id="sign-up-name" type="text" placeholder="Name"/>
                        <input required id="sign-up-surname" type="text" placeholder="Last Name"/>
                        <input required id="sign-up-mail" type="email" placeholder="Email Address"/>
                        <input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
                        <input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
                        <input required id="sign-up-pass" type="password" placeholder="Password"/>
                        <input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
                        <input required id="sign-up-street" type="text" placeholder="Street"/>
                        <input required id="sign-up-nr" type="text" placeholder="Nr"/>
                        <input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
                        <input required id="sign-up-city" type="text" placeholder="City"/>
                        <input required id="sign-up-country" type="text" placeholder="Country"/>
                        <button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
                    </form>
                </div><!--/sign up form-->
            </div>
        </div>
    </div>
</section>

我已经阅读了有关span的内容,但我尝试了它并且它并没有真正起作用。所以这就是。这是我需要用css或html编辑的东西,我到底要找的是什么?

1 个答案:

答案 0 :(得分:0)

您是否提供了bootstrap.min.css的参考 我使用class="form-control"为输入添加了对表单控件的引用 这是你在寻找什么 - https://jsfiddle.net/pmankar/qh6sav52/

尝试调整输出窗格的大小以查看最终页面的显示方式。