设备大小Bootstrap CSS内容越过换行符
我认为我的div标签与其他标签不匹配，但我一次又一次检查它不是。这有点奇怪。我无法理解为什么内容到处都是，我在导航后和内容之后的顶部都有白点。
这就是我得到的
黄色包裹我尝试使用
margin:0; padding:0;height:100%; width:100%;
但它不起作用。
我尝试使用overflow: hidden的差距
它工作，但它不适合我的导航。宽度仍然溢出，但我看不到角落（意思是隐藏它）。
顺便说一句，我使用bootstrap并试图修改一些em。它适用于任何桌面的桌面大小。但当我转向移动设备（iPhone 5方向：potrait）时，它出错了。
请帮助，我不知道发生了什么。我所知道的margin:0; padding:0;height:100%; width:100%;是魔术。但不是。
/* About Us */
#aboutus{
position:relative;
background:#ffff00;
width:auto;
height:auto;
margin:0;
padding:0;
}
.aboutus{
position:relative;
margin-top:80px;
height:auto}
.aboutus > h1 {
padding:0 5%;
letter-spacing:5px;
}
.aboutusleft, .aboutusright{
height:auto;
padding:0 5% 0% 5%;
}
.aboutus h2{
letter-spacing:4px;
padding:5% 5% 1% 5%;}
.aboutus h3{
letter-spacing:1px;
line-height:1.5;
}
.aboutus h3:first-child{
position:relative;
margin-bottom:100px;
z-index:90;
}
.aboutuspitch{
position:absolute;
right:2%;
top:100%;
text-align:right;
width:50%;
transform:translate(-2%, -50%);
z-index:88;
}
.aboutuspitch img{
width:80%;
}
.ourteam{
background:url(../touchupAssets/about/Background1.png);
background-size:100% 100%;
height:100%;
position:relative;
z-index:1;
}
.ourteamContent img{
width:100%;
}
.ourteamContent > h1{
letter-spacing:8px;
}
#ourteamRight{
position:absolute;
top:50%;
right:0;
padding-right:5%;
padding-left:0;
transform:translate(0,-50%);
line-height:1.5;
letter-spacing:2px;
}
.profileBack:first-child{
background:none;
}
#wrapProfileBack{
margin-top:-20%;
}
.psycholog{
padding:0;
margin-top:-2%;
min-height:50vh;
}
.abouttitle{
padding:25px 100px;
letter-spacing:5px;
}
.associates{
margin-top:-2%;
padding-bottom:5%;
background:url(../assets/BG_3.png);
background-size:100% 100%;
min-height:50vh;
}
.profile{
height:100%;
width:75%;
position:relative;
left:50%;
transform:translateX(-50%);
}
.profilecontent{
padding:5% 0;
width:75%;
float:none;
position:relative;
margin:0 auto;
}
.profilepict, .profiletext{
}
.profiletext{
padding:0;
}
.profiletext > h2 {
letter-spacing:5px;
}
.psytitle{
margin-bottom:50px;
font-weight:bold;
}
.profiletext > h3{
padding-right:15%;
letter-spacing:2px;
line-height:1.5;
font-size:21px;
}
.profilepict{
margin-top:-15%;
display:flex;
justify-content:center;
align-items:flex-start;
align-self:flex-start;
padding:0;
}
.profilepict img{
width:150%;
height:100%;
}
.profileBack:nth-child(odd){
position:relative;
z-index:22;
margin-top:-8%;
max-height:100%;
}
.profileBack:nth-child(even){
position:relative;
margin-top:-8%;
max-height:100%;
z-index:20;
}
.profileBack:nth-child(odd):nth-child(3n+1){
background:url(../touchupAssets/about/CyanBackground.png);
background-size:100% 100%;
}
.profileBack:nth-child(even):nth-child(3n+2){
background:#f61a7c;
background-size:100% 100%;
}
.profileBack:nth-child(odd):nth-child(3n+3){
background:url(../touchupAssets/about/YellowBackground.png);
background-size:100% 100%;
}
.profileBack:nth-child(even):nth-child(3n+4){
background:#99ffff;
background-size:100% 100%;
}
.profileBack:nth-child(odd):nth-child(3n+5){
background:url(../touchupAssets/about/MagentaBackground.png);
background-size:100% 100%;
}
.profileBack:nth-child(even):nth-child(3n+6){
background:#ffff00;
background-size:100% 100%;
}
div.profileBack:nth-child(odd) .profiletext {
float:right;
position:absolute;
top:0;
right:0;
display:flex;
height:100%;
align-items:flex-start;
justify-content:center;
flex-direction:column;
}
div.profileBack:nth-child(odd) .profilepict {
float:right;
padding:0;
margin-top:0;
position:absolute;
top:0;
left0;
display:flex;
justify-content:center;
align-items:flex-start;
align-self:flex-start;
}
div.profileBack:nth-child(odd) .profiletext >h2{
padding-left:20%;
}
div.profileBack:nth-child(odd) .profiletext >h3{
padding-left:20%;
padding-right:0;
}
div.profileBack:nth-child(even) .profiletext{
float:left;
position:absolute;
top:0;
left:0;
display:flex;
height:100%;
align-items:flex-start;
justify-content:center;
flex-direction:column;
}
div.profileBack:nth-child(even) .profilepict{
float:left;
padding:0;
margin-top:0;
top:0;
right:0;
position:absolute;
display:flex;
justify-content:center;
align-items:flex-start;
align-self:flex-start;
}
.devteam{
position:relative;
z-index:21;
background:#fff;
background-size:100% 100%;
min-height:100%;
margin-top:-8%;
padding-top:8%;
text-align:center;
}
.teamimg{
height:50%;
display:flex;
align-items:center;
justify-content:center;
}
.teamimgdmg img{
width:100%;
}
@media screen and (max-width: 773px) {
/*About Us*/
#aboutus{
position:relative;
width:100%;
height:100%;
margin:0;
padding:0;
}
.aboutus{
margin-top:50px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
include 'core/init.php';
include 'core/function/profile.php';
?>
<html xmlns="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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>About Us</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
<!-- custom -->
<link rel="stylesheet" type="text/css" href="style/navigation.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="style/laptop.css">
<link rel="stylesheet" type="text/css" href="style/mobile.css">
</head>
<body>
<header class="navigation nav-down">
<nav class="clearfix">
<ul class="clearfix">
<li class="col-md-2 col-sm-12 col-xs-12 navHome"><a href="index.php"><img src="assets/logo_PG.png" /></a></li>
<li id="currentnav" class="col-md-1 col-sm-12 col-xs-12"><a href="aboutus.php">ABOUT US</a></li>
<li class="col-md-1 col-sm-12 col-xs-12"><a href="ourservices.php">OUR SERVICES</a></li>
<li class="col-md-1 col-sm-12 col-xs-12"><a href="journals.php">EVENTS</a></li>
<li class="col-md-1 col-sm-12 col-xs-12"><a href="articles.php">ARTICLES</a></li>
<li class="col-md-1 col-sm-12 col-xs-12"><a href="news.php">NEWS</a></li>
<li class="col-md-1 col-sm-12 col-xs-12"><a href="contactus.php">CONTACT US</a></li>
</ul>
<a href="#" id="pull">text</a>
</nav>
</header>
<div id="aboutus">
<div class="aboutus row">
<h1>ABOUT US</h1><br>
<div class="aboutusleft col-lg-6 col-sm-12 col-xs-12">
<h3>
text</h3>
</div>
<div class="aboutusright col-lg-6 col-sm-12 col-xs-12">
<h3>
text</h3></div>
<div class="aboutuspitch">
<img src="touchupAssets/about/tagline.png">
</div>
</div>
<div class="ourteam row">
<div id="ourteamLeft" class="ourteamContent col-md-8 col-lg-8 col-sm-12">
<img src="touchupAssets/about/PhotoTeam.png">
</div>
<div id="ourteamRight" class="ourteamContent col-md-4 col-lg-4 col-sm-12"><h3>
text</h3>
</div>
</div>
<div class="psycholog container-fluid">
<div class="abouttitle row">
<h1> PYSCHOLOGISTS</h1>
</div>
<div class="profilecontent container">
<div class="row asd">
<div class="profiletext col-xs-8">text</div>
<div class="profilepict col-xs-4"> <img src="images/profilePicture/iBuRatih.png">
</div>
</div>
</div>
<div id="wrapProfileBack">
<?php
while($profile = mysql_fetch_array($psychologQuery)){
?>
<div class="row profileBack">
<div class="row profile">
<div class="profiletext col-xs-8">
<h2><?php echo $profile['psycholog_name']?></h2> <h3><?php echo $profile['psycholog_title'];?></h3>
<h2><?php echo $profile['specialist']?></h2>
<h3><?php echo $profile['displayDescription'];?></h3>
</div>
<div class="profilepict col-xs-4 ">
<img src="images/profilePicture/<?php echo $profile['image'];?>">
</div>
<span style="clear:both"></span>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="devteam row">
<div class="abouttitle row">
<h1>
DEVELOPMENT TEAM
</h1>
</div>
<div class="row teamimg">
<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Account.png"></div>
<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Content.png"></div>
<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Creative.png"></div>
<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Media.png"></div>
<div class="col-xs-2 teamimgdmg"><img src="touchupAssets/about/Research.png"></div>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="style/bootstrap/js/bootstrap.min.js"></script>
<!-- custom -->
<script src="style/navigation.js"></script>
</html>
1 个答案:
答案 0 :(得分：0)
最后我得到了@MostafaBaezid的答案给我一点线索。
这就是我在mobile.css中所做的。
#aboutus{
position:relative;
width:100%;
height:100%;
margin:0;
padding:0;
overflow-X:hidden;
}
.aboutus{
margin-top:50px;
}
它改变了一切。但很难相信。它只是溢出和边缘顶部。愚蠢地使div＃aboutus 100％宽度和高度，但它的工作原理。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？