html - 登录表单太大

Question

我的登录表单太宽了，它占用了页面宽度的 80%，如下图所示。我正在使用默认的 bootstrap.min.css

这是我使用的html代码

<div class="modal-body">
                <h3>Login with your CZCNR account!</h3>
                <form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">

                    <div class="af-outer af-required">
                        <div class="form-group af-inner">
                            <input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
                            <label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
                        </div>
                    </div>

                    <div class="af-outer af-required">
                        <div class="form-group af-inner">
                            <input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
                            <label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
                <button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
            </div>
            </form>
            </div>

任何帮助将不胜感激提前致谢。

Answer 1

试试这个

HTML

<div class="row">
    <div class="col-md-6 col-md-offset-2">
<div class="modal-body ">
                <h3>Login with your CZCNR account!</h3>
                <form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">

                    <div class="af-outer af-required">
                        <div class="form-group af-inner">
                            <input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
                            <label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
                        </div>
                    </div>

                    <div class="af-outer af-required">
                        <div class="form-group af-inner">
                            <input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
                            <label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
                <button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
            </div>
            </form>
            </div>   </div>   </div>

Demo Here