我终于以我想要的方式获得了我的布局,但是当我在移动设备上查看它时,它们都搞砸了。我使用的是Bootstrap 3。
这就是桌面上的内容:http://imgur.com/a/0XUue
在Chrome中使用开发者模式,这就是它在移动设备上的样子:http://imgur.com/k30Ftag
这就是它实际上的样子......:http://imgur.com/a/tgUUI
我使用XAMPP通过localhost访问它,并且一切都在桌面上按预期工作,但在移动设备上发生混乱。值得注意的是,引导程序是破碎的,我自己定义的任何东西都可以正常工作。除了我与引导程序交互的微小JavaScript函数之外,引导程序也是罪魁祸首。
我不知道该怎么做。代码在页面的下方,希望有人能够发现我不能发现的内容。
代码:https://pastebin.com/srwFu9Bi
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title.$sep.$description; ?></title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap-theme.min.css">
<link rel="stylesheet" href="mainStyle.css">
<link href="https://fonts.googleapis.com/css?family=Yantramanav:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body class="bg-grey-3 grey-1">
<!-- HEADER -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid bg-purple-4">
<div class="navbar-header"><a class="navbar-brand orange-1" href="index.php">LifePro Online</a>
<div class="menus" id="myGroup" role="navigation">
<div id="account-btn">
<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#account-menu"><span class="sr-only">Toggle account menu</span><span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div id="char-btn">
<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#char-menu"><span class="sr-only">Toggle character menu</span><span class="glyphicon glyphicon-user"></span>
</button>
</div>
<div id="social-btn">
<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#social-menu"><span class="sr-only">Toggle social menu</span><span class="glyphicon glyphicon-comment"></span>
</button>
</div>
<div class="collapse navbar-collapse col-xs-6 col-lg-4 pull-right" id="account-menu">
<ul>
<li class="bg-blue-0 purple-2"><strong>ACCOUNT</strong></li>
<li class="bg-blue-1"><a class="blue-4" href="characters.html">Settings</a>
</li>
<li class="bg-blue-0"><a class="blue-4" href="index.php?page=account">Log Out</a>
</li>
<li class="bg-blue-1"><a class="blue-4" href="characters.html">Report Bug</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse col-xs-6 col-lg-4 pull-right" id="char-menu">
<ul>
<li class="bg-blue-0 purple-2"><strong>CHARACTERS</strong></li>
<li class="bg-blue-1"><a class="blue-4" href="characters.html">Stats</a>
</li>
<li class="bg-blue-0"><a class="blue-4" href="account.html">Skills</a>
</li>
<li class="bg-blue-1"><a class="blue-4" href="characters.html">Details</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse col-xs-6 col-lg-4 pull-right" id="social-menu">
<ul>
<li class="bg-blue-0 purple-2"><strong>SOCIAL</strong></li>
<li class="bg-blue-1"><a class="blue-4" href="characters.html">Chat</a>
</li>
<li class="bg-blue-0"><a class="blue-4" href="account.html">Messages</a>
</li>
<li class="bg-blue-1"><a class="blue-4" href="characters.html">Forum</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<div id="sign-in">
<div id="curr-user">
</div>
<div id="login-btns">
<button type="button" class="btn btn-xs" data-toggle="modal" data-target="#login-modal">Log In</button>
<button type="button" class="btn btn-xs" data-toggle="modal" data-target="#login-modal">Sign Up</button>
</div>
<div id="login-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
LOG IN
</div>
<div class="modal-body">
USERNAME:<br><br>
PASSWORD:<br><br>
</div>
<div class="modal-footer">
Login Button
</div>
</div>
</div>
</div>
<div id="reg-modal">
</div>
</div>
<!-- CONTENT -->
<div class="content">
<h1 class="bg-grey-4">Become a pro at Life!</h1>
<h2 class="bg-grey-4">An online Browser based multiplayer life simulation game</h2>
<p class="bg-grey-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ea temporibus eius eos saepe excepturi quo id a, nam voluptatibus. Omnis possimus dolorem, ut ullam. Deleniti consectetur eos repellat praesentium!</p>
<p class="bg-grey-4"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quam, officiis. Dignissimos assumenda commodi perferendis tenetur fugit excepturi magni. Nihil, ipsum soluta illo error quos hic minus laborum sunt laboriosam?</span><span>Quo consequuntur, excepturi eveniet mollitia voluptas tempore, ea sunt vel. Dolor inventore ea labore odit explicabo vitae, nesciunt et, quae qui quasi eius enim quaerat magnam earum, rerum voluptatem asperiores!</span></p>
<div class="bg-grey-4">
<p>Color Testing</p>
<div class="row">
<div class="col-xs-4">
<ul>
<li class="bg-purple-0 blue-0">Testing</li>
<li class="bg-purple-1 blue-1">Testing</li>
<li class="bg-purple-2 blue-2">Testing</li>
<li class="bg-purple-3 blue-3">Testing</li>
<li class="bg-purple-4 blue-4">Testing</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li class="bg-blue-0 orange-0">Testing</li>
<li class="bg-blue-1 orange-1">Testing</li>
<li class="bg-blue-2 orange-2">Testing</li>
<li class="bg-blue-3 orange-3">Testing</li>
<li class="bg-blue-4 orange-4">Testing</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li class="bg-purple-0 purple-0">Testing</li>
<li class="bg-orange-1 purple-1">Testing</li>
<li class="bg-orange-2 purple-2">Testing</li>
<li class="bg-orange-3 purple-3">Testing</li>
<li class="bg-orange-4 purple-4">Testing</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer bg-grey-4">
--- FOOTER ---
</div>
<!-- Scripts are loaded AFTER the page content -->
<script src="scripts/jquery-3.2.1.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
这是我的CSS
/* MY Palette link
http://paletton.com/#uid=34L1o0krrvxh5GAmhzzvkqGySl1
Colors (from light to dark)
=== Priamry Purple ===
#801EA7
#AB62C8
#913CB3
#68098D
#51046F
=== Secondary Blue ===
#188E99
#5AB7BF
#349DA6
#047781
#015D66
=== Secondary Orange ===
#FB9124
#FFBC77
#FFA74E
#D56E05
#A85500
*/
/*GENERIC STYLING*/
body{
font-family: 'Yantramanav', sans-serif;
padding-left: 10px;
padding-right: 10px;
}
h1, h2, h3, h4, h5, h6{
color: #FFBC77;
padding: 0.5%;
}
p, li{
padding: 0.5%;
}
ul{
list-style-type: none;
padding: 0.5% 5%;
}
body div.content{
margin-top: 70px;
margin-bottom: 10px;
}
/*NAVBAR STYLING*/
.navbar-brand{
font-size: 1.75em;
font-weight: bold;
text-align: center;
}
.navbar-collapse.collapse{
display: none !important;
}
.navbar-collapse.collapse.in{
display: block !important;
}
.navbar-default .navbar-toggle{
background-color: #FFA74E;
border-color: #FFBC77;
color: #D56E05;
display:block !important;
position: fixed;
top: 0;
width: 3.5rem;
height: 3.5rem;
padding: 0px;
margin: 5px;
text-align: center;
font-size: 1.5em;
line-height: 0;
}
.navbar-default #account-btn .navbar-toggle{
right: 0;
}
.navbar-default #char-btn .navbar-toggle{
right: 4rem;
}
.navbar-default #social-btn .navbar-toggle{
right: 8rem;
}
.navbar-default .navbar-toggle .glyphicon{
font-size: 2rem;
top: 0px;
right: 0px;
}
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover{
background-color: #FFBC77 !important;
border-color: #FFA74E;
color: #FB9124;
}
.navbar-collapse{
margin: 0;
padding: 0;
position: fixed;
top: 50px;
right: 0px;
}
.navbar-collapse ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.navbar-collapse li{
text-shadow: none;
font-size: 1.5em;
font-weight: bold;
margin: 0;
padding: 0;
padding-top: 2%;
padding-left: 5%;
width: 100%;
height: 4rem;
float: none !important;
}
@media (min-width: 768px){
.navbar-collapse {
width: 40% !important;
}
}
.navbar-right > ul {
float: none !important;
}
.collapsing {
-webkit-transition: none;
transition: none;
}
/*BREADCRUMB / LOGIN $ REGISTRATION BAR*/
.breadcrumb{
position: absolute;
top: 51px;
left: 0px;
width:100%;
padding: 0px 15px;
background-color: #047781;
border: 2px solid #015D66;
border-radius: 0px;
color: #5AB7BF;
}
.breadcrumb a{
color: #5AB7BF;
}
.breadcrumb .active, .breadcrumb li + li:before{
color: #349DA6;
}
#sign-in{
position: absolute;
top: 55px;
right: 1%;
}
#login-modal .modal-dialog{
width: 75%;
height: 75%;
position: fixed;
top: 20;
bottom: 0;
left: 0;
right: 0;
margin:auto;
text-align: center;
color: #FFBC77;
}
#login-modal .modal-header{
font-weight: bold;
font-size: 2em;
background-color: #51046F;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid #51046F;
}
#login-modal .modal-body{
background-color: #AB62C8;
border: 3px solid #51046F;
}
#login-modal .modal-footer{
font-weight: bold;
font-size: 2em;
background-color: #51046F;
text-align: center;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #51046F;
}
/*BACKGROUND COLOR CLASSES*/
.bg-purple-0 { background-color: #AB62C8 !important }
.bg-purple-1 { background-color: #913CB3 !important }
.bg-purple-2 { background-color: #801EA7 !important }
.bg-purple-3 { background-color: #68098D !important }
.bg-purple-4 { background-color: #51046F !important }
.bg-blue-0 { background-color: #5AB7BF !important }
.bg-blue-1 { background-color: #349DA6 !important }
.bg-blue-2 { background-color: #188E99 !important }
.bg-blue-3 { background-color: #047781 !important }
.bg-blue-4 { background-color: #015D66 !important }
.bg-orange-0 { background-color: #FFBC77 !important }
.bg-orange-1 { background-color: #FFA74E !important }
.bg-orange-2 { background-color: #FB9124 !important }
.bg-orange-3 { background-color: #D56E05 !important }
.bg-orange-4 { background-color: #A85500 !important }
.bg-grey-0 { background-color: #aaaaaa !important }
.bg-grey-1 { background-color: #777777 !important }
.bg-grey-2 { background-color: #444444 !important }
.bg-grey-3 { background-color: #1a1a1a !important }
.bg-grey-4 { background-color: #111111 !important }
/*COLOR CLASSES*/
.purple-0 { color: #AB62C8 !important }
.purple-1 { color: #913CB3 !important }
.purple-2 { color: #801EA7 !important }
.purple-3 { color: #68098D !important }
.purple-4 { color: #51046F !important }
.blue-0 { color: #5AB7BF !important }
.blue-1 { color: #349DA6 !important }
.blue-2 { color: #188E99 !important }
.blue-3 { color: #047781 !important }
.blue-4 { color: #015D66 !important }
.orange-0 { color: #FFBC77 !important }
.orange-1 { color: #FFA74E !important }
.orange-2 { color: #FB9124 !important }
.orange-3 { color: #D56E05 !important }
.orange-4 { color: #A85500 !important }
.grey-0 { color: #aaaaaa !important }
.grey-1 { color: #777777 !important }
.grey-2 { color: #444444 !important }
.grey-3 { color: #1a1a1a !important }
.grey-4 { color: #111111 !important }
答案 0 :(得分:1)
请找到plunkr解决方案:
https://plnkr.co/edit/PPIREe142MFHyGrLi99B?p=preview
.content{
padding-top : 30px;
}
并使用bootstrap cdn
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="scripts/jquery-3.2.1.js"></script>