Question

编程很新只是一个与我的collaspable意思的错误在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）：

Answer 1

是的，在另一部手机上试了一下并为他们工作了新手机的时间

越野车菜单按钮

1 个答案: