Html bootstrap3'；s网格布局在iphone 6s的横向模式下没有响应_Html_Css_Twitter Bootstrap 3

Html bootstrap3'；s网格布局在iphone 6s的横向模式下没有响应

html css twitter-bootstrap-3

Html bootstrap3'；s网格布局在iphone 6s的横向模式下没有响应,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我已经创建了一个登录/密码页面。在iphone 6s和surface pro 3笔记本电脑上查看时，徽标、登录名和密码字段应位于页面中心（垂直和水平）。在底部，我想创建3个列表项（水平方向使用管状分隔符）。我面临以下问题： 1）下面的代码显示了在笔记本电脑（任何方向）和iphone上以potrait模式查看时中心的内容。在手机的横向模式下，徽标会被剪裁，内容不在中间 <!DOCTYPE html> <html lang="en" xmlns:font-variant="htt

我已经创建了一个登录/密码页面。在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>


HTML测试
/*这使得徽标和登录中心垂直*/
.中心表格{
宽度：100%；
保证金：自动；
位置：相对位置；
最高：50%；
转换：translateY（-50%）
}
/*要使元素（登录名和徽标）居中，需要设置父元素的高度*/
html，正文{
身高：100%；
保证金：0；
填充：0
}
ul#选项li+li：之前{
内容：“|”；
填充：0 10px；
}
电子邮件
密码
记得我吗
登录

垂直居中是出了名的棘手。您的问题围绕着比内容短的视口高度展开。以下是一些解决方案：

1）在CSS的垂直居中块周围添加媒体查询条件（例如

@media（最小高度：500px）{…}

），以便在较短的屏幕上禁用它，并恢复为正常的可滚动页面

2）使用全高容器控制对中，而不是相对定位。如果做得正确，它可以用更少的代码达到同样的效果

关于管道分隔列表，我想你使用的是最新的Bootstrap 4 alpha，在这种情况下，出于某种奇怪的原因，每个

都需要一类

列表内联项