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

使用.offset *类将列移到右侧。每个班级增加整列的左边距。例如，.offset4 将.span4移到四列上。

DEMO

Answer 2

尝试在CSS中使用它

.row-fluid .login-header,
.row-fluid .login-box{
      float:none;
      margin:0 auto !important;
}

Answer 3

由于默认情况下.span*具有float: left样式，您可以使用float:none;

覆盖它

.login-box {
    margin:0 auto;
    float:none;
}

margin:0 auto;用于水平居中loginbox。

如何使用bootstrap将表格保持在中心2.2.2

3 个答案: