越野车菜单按钮答案

【问题标题】：Buggy menu button越野车菜单按钮
【发布时间】：2016-04-20 03:38:50
【问题描述】：

对编程非常陌生只是我的可折叠装置的一个错误在 320px 宽度上的浏览器 firefox 响应式设计视图上看起来不错但是当我在我的手机firefox浏览器上加载我时，它会误以为它是一个方块我对这一切都很陌生，并试图使用 bootstrap 4 来克服我缺乏 javascript 知识加上我不知道如何使用那个 jfiddle 抱歉:(所以这是我得到的代码和 img

<nav class="navbar navbar-fixed-top navbar-default">
        <div class="row header">

                <div class="col-xs-3 pull-xs-right">
                <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">&#9776;
                </button>
                </div>

                <div class="col-xs-3">
                    <img src="images/emblem.gif" class="img-fluid pull-xs-left" alt="emblem">
                </div>

                <div class="col-xs-6">
                    <h2>Systems</h2>
                    <p>Driving School</p>
                </div>

        </div>

        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">                
            <ul class="nav nav-stacked nav-pills">
                <li class="nav-item">
                <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#area">Area</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#deals">Deals</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

还有我的css

body {
position: relative;
}

 /**** NAVBAR/HEADER ****/

.navbar {
     padding: 0;

} 

.header {
    background-color: #232323;    
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

button {
    color: white;
 } 

button:focus {
    outline: 1px solid;

}   

a {
    color: dimgrey;
}

.header {
    color: white;
    padding: 0.5rem;
}

.header p {
   color: dimgrey;
}

.header img {
    padding: 0.5rem;
}

.header .col-xs-3 {
    padding-right: 0;
}

这是 firefoxbrower 响应式设计视图的结果

我想要什么：

和我的手机浏览器为什么菜单栏是白色的？（firefox）：

【问题讨论】：

bootstrap 4..你确定使用 bootstrap 4？
maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/…" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
所以我重新开始，简单地从 bootstrap 4 网站 v4-alpha.getbootstrap.com/components/navbar 剪切和粘贴模板@
仍然存在错误。必须是引导程序 4 问题。我得想一个更容易管理的布局；'(
您的手机中似乎没有加载图标..

标签： twitter-bootstrap mobile drop-down-menu

【解决方案1】：

是的，在另一部手机上尝试过，然后在他们的手机上工作是时候换新手机了

【讨论】：