Question

这是我当前导航栏在大屏幕上的样子：

current

这就是小屏幕（手机）上的样子

small

我想要发生的事情是，让左上角的U标志消失，然后让＃34;联系我们。与其他元素越来越接近（我使用右拉类使触摸屏在大屏幕上向右移动）而不是导航栏位于中心，我希望它可以100％水平传播所以它＆＃ 39;更容易点击它们

aim

现在我的代码：

http://www.bootply.com/G30iN5Ai4u

我尝试使用.hidden-xs类来隐藏徽标，但它没有工作

Answer 1

尝试： http://www.bootply.com/sGWCci6pBi

使用bootstrap实用程序类：

visible-xs-block：仅在移动设备中可见
visible-sm-block：仅在较小的设备中可见，例如平板电脑＆＃39;
visible-md-block：仅在像桌面＆＃39;
visible-lg-block：仅在桌面＆＃39;

可以找到其他示例： https://github.com/twbs/bootstrap/issues/8883

@eratzlaff说：

快速修复或可能的解决方法。

hidden-sm hidden-md = visible-lg

hidden-sm hidden-lg = visible-md

hidden-md hidden-lg = visible-sm

代码示例：

<nav class="navbar navbar-transparent">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
            </div>
                <ul class="nav navbar-nav navbar-firstnav">
                    <li><a href="#work">work</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#skills">skills</a></li>
                    <li class="visible-xs-block"><a href="#contact">get in touch</a></li>
                    <li class="pull-right visible-lg-block visible-md-block visible-sm-block"><a href="#contact">get in touch</a>
                </li></ul>
            </div>
        </nav>

Answer 2

HTML代码有一个未打开的div结束标记。

否则必须将类hidden-xs应用于navbar-header div：

＆＃13;

    <nav class="navbar navbar-transparent">
        <div class="container-fluid">
            <div class="navbar-header hidden-xs">
                <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
            </div>
            <ul class="nav navbar-nav navbar-firstnav">
                <li><a href="#work">work</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
                <li class="pull-right"><a href="#contact">get in touch</a>
            </ul>
        </div>
    </nav>

＆＃13;

在小屏幕上隐藏和管理导航栏元素

2 个答案: