Question

我第一次学习bootstrap。我很难将一个面板集中在页面中间进行登录。

示例：

<div class="container">
    <div style='width:500px' class="panel panel-default">

        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Login</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputEmail">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-lg btn-primary">Login</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

怎么做？

Answer 1

查看您的修改代码＆gt;＆gt; Middle Panel

<div style='width:500px;margin:0 auto;' class="panel panel-default">

Answer 2

这通常通过给div赋予特定宽度（百分比或固定）以及margin:0 auto;来实现。

Answer 3

分配

.container { 
    width:100%; 
}

.panel-default{
    margin: 0 auto;
}

使用margin: 0 auto

可以设置div的边距：0表示顶部和底部，而auto表示左右。使用0时，将添加0px的边距（根本没有边距）。使用auto，您可以要求浏览器设置自动计算的像素数量，因为可以将div置于div父级（.container）中心。要应用auto，div父级的宽度应至少大于其子级。在这种情况下，要将子div居中到页面中心，我们应该将父级的宽度设置为100％（这意味着其容器的宽度相同（在这种情况下，“.container”的容器应该是正文！）。

如何将面板集中在中间？

3 个答案: