Question

我想要一个密码输入和按钮在同一行。这是指向test site.

的链接

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Writer's Tryst Log-In Form</title>
        <link href='css/log-in.css' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <div class="container center_div">
            <form name="form-login" id="form-login" class="form-horizontal well center-form-small">
                <h1>Log-In</h1>
                <div id="identification">
                    <img id="photo" src="#" alt="photo" />
                    <input id="fullname" type="text" readonly="readonly" />
                </div>
                <div id="form-elements">
                    <p class="text-center">
                        <button id="facebook-login" class="btn btn-primary" >Login with Facebook</button>
                    </p>
                    <p class="text-center">
                        <button id="google-login" class="btn btn-primary" >Login with Google</button>
                    </p>
                    <p class="text-center">
                        <button class="btn btn-success" >- OR ENTER -</button>
                    </p>
                    <div class="form-group">
                        <input type="text" class="form-control" required id="email" name="email" placeholder="Email"  />
                    </div>
                    <div class="form-group row" style="width: 100%">
                         <div class="col-sm-8">
                            <input type="password" class="form-control pull-left" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
                            <button id="show-pwd" class="btn btn-primary" tabindex="-1">show</button>
                    </div>
                    <div class="form-group">
                        <button type="submit" id="login-submit" name="login-submit" class="btn btn-default">Log-In</button>
                    </div>
                </div>
                <div class="form-group">
                    <a id ="goto-account" href="#">create account</a>
                    <a id ="reset-pwd" href="#" >reset password</a>
                </div>
            </form>
            <div id="request-email">
                <form id="request-email-form" class="form-horizontal well center-form-tiny">
                    <div class="form-group">
                        <input type="email" class="form-control" required id="email" name="email" autofocus="true" placeholder="Your preferred Email" />
                    </div>
                    <div class="form-group">
                        <button type="submit" id="login-submit" name="login-submit" class="btn btn-default">Send Email</button>
                    </div>
                    <a id="reset-close" href="#">close</a>
                    <input type="hidden" id="subject" name="subject" value="Writer's Tryst - reset password." />
                    <input type="hidden" id="msg" name="msg" />
                    <input type="hidden" id="name" name="name" value="N/A" />
                    <input type="hidden" id="emailmsg" name="emailmsg" value="Reset password email sent." />
                    <input type="hidden" id="ishtml" name="is-html" value="Reset password email sent." />
                </form>
            </div>
        </div>
        <script src="js/login.js"></script>
    </body>
</html>

Answer 1

将包含密码字段和按钮的行更改为：

<div class="form-group row" style="width: 100%">
    <div class="col-sm-8">
        <input type="password" class="form-control pull-left" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
    </div>
    <div class="col-sm-4">
        <button id="show-pwd" class="btn btn-primary" tabindex="-1">show</button>
    </div>
</div>

Bootstrap构建在12列网格上，因此请确保您的col-size-x列每行最多添加12个。

为什么我不能让Bootstrap正确浮动？

1 个答案: