文章/答案/技术大牛

发布

社区首页 >问答首页 >移动设备上的水平居中切换按钮

问移动设备上的水平居中切换按钮
EN

Stack Overflow用户

提问于 2015-06-24 00:27:21

回答 1查看 994关注 0票数 0

我在我的Wordpress站点中有一个默认的Bootstrap导航设置

HTML

<div class="container-fluid">
<div class="row">
    <nav class="navbar navbar-custom" role="navigation">
         <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button> 
                <a class="navbar-brand" href="<?php echo home_url(); ?>"></a>
            </div>           
        <!-- Collect the nav links, forms, and other content for toggling --> 
            <div class="collapse navbar-collapse navbar-right"> 
                <?php /* Primary navigation */
                    wp_nav_menu( array(
                    'menu' => 'top_menu',
                    'depth' => 2,
                    'container' => false,
                    'menu_class' => 'nav navbar-nav',
                    //Process nav menu using our custom nav walker
                    'walker' => new wp_bootstrap_navwalker())
                    );
                ?>
            </div>
    </nav>
</div><!-- /row -->

我想让“切换”按钮水平居中，让导航栏品牌在手机屏幕上消失。(我将添加一个仅在移动设备上显示的巨型加速器)

CSS

@media screen and (max-width: 768px) {

.navbar-brand { display:none; }
.navbar-custom .navbar-toggle {text-align: center;}

...

我在我的CSS之前引入了Bootstrap CDN。我的css不工作，不确定我做错了什么。

html

css

wordpress

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2015-06-24 00:33:29

您需要使用media query来指定不同屏幕大小的CSS。使用移动端的默认Bootstrap大小为767px及以下，并以移动端优先的心态思考：

.navbar-brand { display: none; }
.navbar-custom .navbar-toggle {text-align: center;}

@media (min-width: 768px) {
    .navbar-brand { display: block; }
    .navbar-custom .navbar-toggle {text-align: left;}

}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31008356

复制

相似问题

问移动设备上的水平居中切换按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动设备上的水平居中切换按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动设备上的水平居中切换按钮
EN