Question

我想对齐网页的整个面板中心。有人可以帮我解决这个问题吗？还有，请你帮我一本好书，我可以用来学习自举设计。

<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>

感谢你 Swetha

Answer 1

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

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

Answer 2

只需添加

位置是：固定

即使向下滚动，它也会保持在视野中。在http://jsfiddle.net/xyrkyxe8/

看到它

mvn verify -Dtestcase.category=PriorityHigh
# just run PriorityHigh tests

mvn verify
# run PriorityLow and PriorityHigh tests

# etc.

Answer 3

值得一提的是，为了使一个面板甚至一组面板居中，还可以结合使用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>

对齐网页的bootstrap面板中心

3 个答案: