如何对齐网页的 Bootstrap 面板中心？

Question

我想对齐网页的整个面板中心。有人可以帮我解决这个问题吗？

也可以请你帮我一本好书，我可以用它来学习 Bootstrap 设计？

 <div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">
                <h3 class="panel-title text-center">User Login</h3>
            </div>
            <div class="panel-body">
                @Html.ValidationSummary(true)

                <table class="table">
                    <tbody>
                        <tr>
                            <td>@Html.LabelFor(model => model.Username)</td>
                            <td>@Html.EditorFor(model => model.Username)</td>
                            <td>@Html.ValidationMessageFor(model => model.Username)</td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(model => model.Password)</td>
                            <td>@Html.EditorFor(model => model.Password)</td>
                            <td>@Html.ValidationMessageFor(model => model.Password)</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="Login" class="btn btn-default" style="" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

感谢您

斯维塔

原文由 user3175327 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以从 panel 中删除 css 样式并将其包装如下。

 <div class="col-sm-6 col-sm-offset-3">
  <div class="panel panel-default">
    ...
  </div>
</div>

原文由 Murtza 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

值得一提的是，为了使一个面板或一组面板居中，也可以结合使用 flex 和 justify-content 属性：

 .row-fluid {
   display: flex;
   justify-content: center;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row text-center row-fluid">
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 1</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 2</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-xs-3">
         <div class="panel panel-default">
            <div class="panel-heading">Panel 3</div>
            <div class="panel-body">
               <ul class="list-group">
                  <li class="list-group-item">Line 1</li>
                  <li class="list-group-item">Line 2</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>

原文由 OfirD 发布，翻译遵循 CC BY-SA 4.0 许可协议