Question

我想在桌面显示器的example A中显示字形，在菜单扩展时显示移动设备example B中的字形。（两个示例中的代码相同，但css除外）。

<div class="container">
    <nav class="header-nav-wrapper container-nav-menu navbar navbar-default white-back">
        <div class="container-fluid">
            <div class="navbar-header">                       
                <a alt="" rel="home" href="google.com">
                    <img class="logo" src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex-android/48/app-drawer-icon.png"/>
                </a>
                <button data-target="#social-menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                    <span class="sr-only"><?php _e('Toggle navigation menu','justmakeit');?></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="col-sm-11 content">
                <div class="container-fluid">
                    <div class="hidden-xs col-sm-6   blue-light-back"><span>Brand</span>
                    </div>
                    <div class="col-xs-12 col-sm-4 col-sm-push-4 col-md-push-4 red-dark-back">
                        <div id="social-menu" class="collapse navbar-collapse">
                            <ul class="menu nav navbar-nav navbar-default white-back">
                                <li class="facebook">
                                    <a  href="http://facebook.com" target="_blank">
                                        <span class="glyphicon glyphicon-play-circle"></span><span class="social-name">facebook</span>
                                    </a>
                                </li>
                                <li class="twitter">
                                    <a href="http://twitter.com" target="_blank">
                                        <span class="glyphicon glyphicon-download"></span><span class="social-name">twitter</span>
                                    </a>
                                </li>
                                <li class="google-plus">
                                    <a  href="http://plus.google.com" target="_blank">
                                        <span class="glyphicon glyphicon-download"></span><span class="social-name">google+</span>
                                    </a>
                                </li>
                                <li class="pinterest">
                                    <a href="http://pinterest.com" target="_blank">
                                        <span class="glyphicon glyphicon-download"></span><span class="social-name">pinterest</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

            </div>
        </div>
    </nav>
</div>

示例A css：

#social-menu li{
    display: inline-block;
    padding: 0px;
}
#social-menu li a{
    padding: 0px;
}

#social-menu .social-name{
    display: block;
    height: 1.4375em;
    overflow: hidden;
    text-indent: 100%;
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    width: 1.4375em;
}

示例B：http://jsfiddle.net/77m94xf4/4/

Html与Example A中的相同。例B css：No。

Answer 1

要执行此操作，您可以使用@media Query并为每个尺寸设置css属性。例如：

@media screen and (max-width: 300px)
    {
        add your css for mobile
    }

@media screen and (min-width: 800px)
{
add your css for desctop
}

通过@media Query，您可以为每个设备设置css。例如：移动设备，平板电脑，桌面

Learn more about @media query

Answer 2

我添加了@media Query来恢复移动菜单项的CSS。

@media screen and (min-width: 1px) and (max-width: 767px){
    #social-menu li{
        display:block
    }
    #social-menu .social-name{
        display: inline;
        height: none;
        overflow: none;
        text-indent: none;
        white-space: none;
        width: none;
    }    
}

如何在导航栏上创建水平字形以显示为垂直菜单

2 个答案: