gpt4 book ai didi

html - bootstrap3 的网格布局在 iphone 6s 的横向模式下没有响应

转载 作者:行者123 更新时间:2023-11-28 04:24:38 24 4
gpt4 key购买 nike

我已经创建了一个登录/密码页面。在 iphone 6s 和 Surface pro 3 笔记本电脑上查看时, Logo 、登录名和密码字段应位于页面的中心(垂直和水平)。在底部,我想创建 3 个列表项(水平使用类似管道的分隔符)。我面临以下问题:

1) 下面的代码显示了在笔记本电脑(任何方向)和 iPhone 的肖像模式下查看时居中的内容。在手机的横向模式下, Logo 被剪裁并且内容不在中心。

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

最佳答案

垂直居中是出了名的棘手。您的问题围绕着视口(viewport)高度比内容短。这里有几个解决方案:

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

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

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

关于html - bootstrap3 的网格布局在 iphone 6s 的横向模式下没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42037410/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com