gpt4 book ai didi

jquery - 在 Bootstrap 3 中将切换按钮居中

转载 作者:太空宇宙 更新时间:2023-11-04 03:10:12 24 4
gpt4 key购买 nike

我在我的 wordpress 主题中使用由 bootstrap 3 提供的默认导航栏(更改了一些方面,因此重命名为“.navbar-custom”)。

当屏幕为移动设备大小时,它在右下角有默认的“切换”。它在左侧有“.navbar-brand”。

我希望“切换”在移动模式下自行居中。我也希望“.navbar-brand”也居中(如果我可以切换到网站 Logo 下方,那就太好了)

我在 jsfiddle 中找到了可用但对我不起作用的示例。唯一对我有任何视觉结果的是(在媒体查询中)

.navbar-toggle {
width: 100%;
float: none;
margin: 0 auto;
}

但这只是将切换开关移至导航栏的左侧。我的代码是典型的唠叨代码,但在这里

<header>    
<nav class="navbar navbar-custom row" 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-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class="navbar-brand">
<?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
<a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
<?php } else { ?>
<h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php } ?>
</div>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-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 class="row">
<div class="col-md-12 col-xs-12">
<h1>content</h1>
</div>
</div>

</header>

最佳答案

只需将您的按钮放在另一个带有 text-center 类的 div 中

<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

编辑:

你可能想在 CSS 下面检查一下

.navbar-toggle {
width: 100%;
float: none;
margin-right: 0;
}

DEMO

关于jquery - 在 Bootstrap 3 中将切换按钮居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29690994/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com