堆栈内存溢出
  繁体   English   中英

引导程序无法在手机上正确显示

[英]Bootstrap not displaying properly on mobile

 原文  2017-05-12 05:49:05  3   1    javascript/ android/ html/ css/ twitter-bootstrap

问题描述

我终于以自己想要的方式获得了布局，但是当我在移动设备上查看时，一切都弄糟了。 我正在使用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&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 }

1 个解决方案

解决方案1
 1 已采纳  2017-05-12 06:04:55

请找到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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery Mobile元素无法正确显示 Bootstrap 3轮播无法正确加载/显示 Bootstrap3 Navs无法正确显示 Chrome无法正确显示Bootstrap3 datepickertime jquery/bootstrap 显示不正确 Bootstrap datetimepicker样式无法正常显示 修复 bootstrap daterangepicker 在 bootstrap 3.3.7 上没有正确显示的问题 使用Bootstrap时在网站上显示strangley的网站 引导表单仅在Firefox中无法正确显示 Bootstrap SelectPicker 下拉菜单在 dataTable 中未正确显示？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM