webentwicklung-frage-antwort-db.com.de

richten Sie die Mitte des Bootstrap-Bereichs der Webseite aus

Ich möchte die gesamte Panelmitte der Webseite ausrichten. Könnte mir jemand dabei helfen? Könnten Sie mir bitte auch ein gutes Buch helfen, mit dem ich Bootstrap-Design lernen kann?.

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

Ich danke Ihnen. Swetha

htmlcssasp.net-mvctwitter-bootstrap
6
user3175327

Sie können den CSS-Stil aus panel entfernen und diesen wie folgt umbrechen.

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

Es ist erwähnenswert, dass zum Zentrieren eines Panels oder einer Gruppe von Pannels auch eine Kombination aus flex und der Eigenschaft justify-content Verwendet werden kann:

.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>
0
HeyJude

einfach hinzufügen 

position: feststehend

und es bleibt auch dann in Sicht, wenn Sie nach unten scrollen. siehe unter http://jsfiddle.net/xyrkyxe8/

#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
0
Garth Sebastian