Bootstrap3 Grid-Layout reagiert nicht im Querformat von Iphone 6s

Ich habe eine Login/Passwort-Seite erstellt. Das Logo, die Login- und Passwortfelder sollten in der Mitte der Seite (vertikal und horizontal) sowohl auf dem iPhone 6s als auch auf dem Surface Pro 3 Laptop angezeigt werden. Unten möchte ich 3 Listenelemente erstellen (horizontal mit einem rohrförmigen Trennzeichen). Ich habe folgendes Problem:Bootstrap3 Grid-Layout reagiert nicht im Querformat von Iphone 6s

1) Der folgende Code zeigt den Inhalt in der Mitte, wenn auf dem Laptop (keine Ausrichtung) und auf dem iPhone im Potrait-Modus. Im Landscape-Modus am Telefon wird das Logo abgeschnitten und der Inhalt steht nicht im Mittelpunkt.

<!DOCTYPE html> 
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <title>HTML Test</title> 
    <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/bootstrap.min.css")"> 
    <!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"--> 
    <style type="text/css"> 

     /* this makes the logo and login center vertically*/ 
     .center-form { 
      width:100%; 
      margin:auto; 
      position:relative; 
      top:50%; 
      transform: translateY(-50%) 
     } 
     /* to centre an element (login and logo), the height of parent need to be set*/ 
     html, body{ 
      height:100%; 
      margin:0; 
      padding:0 
     } 

ul#options li + li:before{ 
    content: " | "; 
    padding: 0 10px; 
} 
</style> 

</head> 
<body> 

<div class="container center-form" > 

    <!-- for medium and large screens, 
    First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column--> 

    <div class="row" > 
     <!--empty column--> 
     <div class="col-md-4 col-lg-4" ></div> 

     <!--logo column--> 
     <div class="col-md-4 col-lg-4" > 
      <div> 
       <img src="some image")" alt="someimage" height="64" width="303"> 
      </div> 
     </div> 
     <!--empty column--> 
     <div class="col-md-4 col-lg-4"></div> 
    </div> 

    <!-- for medium and large screens, 
    Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). --> 
    <div class="row" > 
     <!--empty column--> 
     <div class="col-md-4 col-lg-4"></div> 

     <!--form--> 
     <div class="col-md-4 col-lg-4"> 

      <form action="#"> 
       <div class="form-group"> 
        <label for="email">Email</label> 
        <input type="email" class="form-control" id="email" required> 
       </div> 
       <div class="form-group"> 
        <label for="password">Password</label> 
        <input type="password" class="form-control" id="password" required> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox"> Remember me</label> 
       </div> 
       <button type="submit" class="btn btn-primary">Login</button> 
      </form> 
      <br> 
      <ul id="options" class="list-inline"> 
       <li><a href="#">Forgot password</a></li> 
       <li><a href="#">Sign up</a></li> 
       <li><a href="#">About </a></li> 
      </ul> 
     </div> 
     <!--empty column--> 
     <div class="col-md-4 col-lg-4"> 

     </div> 
    </div> 
</div> 
<!--script src="@routes.Assets.at("javascripts/jquery-1.9.0.min")"></script--> 
<!--script src="@routes.Assets.at("javascripts/bootstrap.min.js")"></script--> 
</body> 
</html>

Quelle

2017-02-04 Manu Chadha

Vertikale Zentrierung ist notorisch schwierig. Ihre Probleme drehen sich darum, dass die Höhe des Ansichtsfensters kürzer ist als der Inhalt. Hier sind ein paar Lösungen:

1) Fügen Sie eine Medienabfrage bedingten (wie @media (min-height:500px) {...}) um den vertikalen Zentrierungsblock von CSS, so dass es auf kürzeren Bildschirmen deaktiviert wird, und kehrt zu einer normalen scrollbaren Seite zurück.

2) Verwenden Sie einen Behälter mit voller Höhe flexbox, um die Zentrierung anstelle der relativen Positionierung zu steuern. Wenn es richtig gemacht wird, kann es den gleichen Effekt mit viel weniger Code haben.

In Bezug auf die Pipe-getrennte Liste, werde ich auf eine Extremität gehen und denke, Sie verwenden die neueste Bootstrap 4 Alpha, in diesem Fall jede <li> benötigt eine Klasse von list-inline-item aus irgendeinem seltsamen Grund.

Quelle

2017-02-04 07:05:24

Bootstrap3 Grid-Layout reagiert nicht im Querformat von Iphone 6s

Antwort

Verwandte Themen