Question

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

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

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

Answer 1

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

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

2）使用全高flexbox容器来控制居中而不是相对定位。如果正确完成，它可以用更少的代码产生相同的效果。

关于以管道分隔的列表，我会想到你正在使用最新的Bootstrap 4 alpha，在这种情况下，每个<li>需要一类list-inline-item奇怪的原因。

bootstrap3的网格布局在iphone 6s的横向模式下无响应

1 个答案: