引导程序无法在移动设备上正确显示答案

【问题标题】：Bootstrap not displaying properly on mobile引导程序无法在移动设备上正确显示
【发布时间】：2017-05-12 05:49:05
【问题描述】：

我终于得到了我想要的布局，但是当我在手机上查看时，一切都搞砸了。我正在使用 Bootstrap 3。

在 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&amp;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 }

【问题讨论】：

你的CSS在哪里？如果您可以创建一个 plunkr soln 并在此处分享链接会更好
哦，糟糕！刚刚加了！对不起。
@YounisArM 我没用过 plunkr，我去查一下
没问题，我已经创建了一个

标签： javascript android html css twitter-bootstrap

【解决方案1】：

请找到 plunkr 解决方案：

https://plnkr.co/edit/PPIREe142MFHyGrLi99B?p=preview

.content{
  padding-top : 30px;
}

并使用引导 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>

【讨论】：

我认为下载文件比在页面中添加链接更快？此外，所做的只是将内容部分向下移动。它不能用引导程序解决任何问题。在我的手机上，它看起来仍然一团糟。
哦，哇，我很惊讶它起作用了。十分感谢你的帮助！您是否解释了为什么使用 CDN 使其在移动设备上运行？您链接的网站列出了一些优点和缺点，但没有任何内容表明引导程序在本地保存时无法在移动设备上运行。
Bootstrap 应该可以工作，即使它保存在本地，我不知道为什么它不适合你，因为我无权访问你的代码。很高兴解决方案奏效