Bootstrap3的网格布局在iPhone 6s的横向模式下没有响应

我创建了一个登录/密码页面。在iPhone 6s和Surface Pro 3笔记本电脑上查看时，徽标，登录名和密码字段都应位于页面中心(垂直和水平(。在底部，我想创建 3 个列表项(水平使用管道状分隔符(。我面临以下问题：

1(下面的代码显示了在笔记本电脑(任何方向(和iPhone上以potrait模式查看时中心的内容。在手机上的横向模式下，徽标被剪裁，内容不在中心。

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

众所周知，垂直居中非常棘手。您的问题围绕着视口高度短于内容。以下是几个解决方案：

1( 在 CSS 的垂直居中块周围添加一个媒体查询条件(例如 @media (min-height:500px) {...}(，使其在较短的屏幕上被禁用，并恢复为正常的可滚动页面。

2( 使用全高弹性框容器来控制居中而不是相对定位。如果操作正确，它可以用更少的代码产生相同的效果。

关于管道分隔列表，我会冒昧地猜测你使用的是最新的 Bootstrap 4 alpha，在这种情况下，出于某种奇怪的原因，每个<li>都需要一类list-inline-item。

相关内容

最新更新

热门标签：