html - 如何使用 bootstrap 2.2.2 将表格保持在中心位置

Question

在此bootply欢迎和表格都在左侧。但我想把它放在中间。任何人都可以告诉我该怎么做吗？

<form id="form1">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10" style="margin-bottom: 6px; margin-top: 0px; background: #efeee9">
                    <img src="ui_resources/img/ title.jpg" alt="" align="left">
                    <h2 align="center" style="margin-top: 18px;"></h2>
                </div>
                <div class="span1"></div>
            </div>

            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10" style="background: #eee; border: 1px solid #ddd;">

                    <div class="span7 center login-header">
                    <h2 style="color:#E86537 " align="center">Welcome </h2>
                </div><!--/span-->
                        <div class="row-fluid">
                <div class="well span7 center login-box">
                    <div class="alert alert-info">
                        Please login with your Username and Password.
                    </div>




                        <fieldset>
                            <div class="input-prepend" title="Username" data-rel="tooltip" style="margin-left:80px;">
                                <span class="add-on"><i class="icon-user"></i></span><input autofocus="" class="input-large span10" name="j_username" id="username" type="text" value="">
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" title="Password" data-rel="tooltip" style="margin-left:80px;">
                                <span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="j_password" id="password" type="password" value="">
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" style="margin-left:80px;">
                            <label class="remember" for="remember"><input type="checkbox" id="remember" style="display:">Remember me</label>
                            </div>
                            <div class="clearfix"></div>

                            <p class="center span6" style="margin-left:80px;">
                            <button type="submit" class="btn btn-primary">Login</button>
                            New User<a href="/NewPatient">register</a>
                            </p>
                        </fieldset>

                </div><!--/span-->
            </div><!--/row-->


            </div><!--/row-->




                </div>
                <div class="span1"></div>
            </div></form>
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10" style="margin-top: 6px;">
                <div class="span1"></div>

                </div>

            </div>

Answer 1

尝试像这样在另一个 div 中设置您的欢迎 div

<div class="row-fluid">
    <div class="offset3 span6 center login-header">
        <h2 style="color:#E86537 " align="center">Welcome </h2>
    </div>
</div>

使用offset

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

DEMO