将引导按钮置于Bootstrap 3中

我在我的WordPress主题中使用了引导程序3提供的默认导航栏（更改了某些方面，因此将其重命名为'.navbar-custom'）。将引导按钮置于Bootstrap 3中

当屏幕为手机尺寸时，它在右下角具有默认的“切换”。它在左侧有'.navbar-brand'。

我希望'切换'在移动模式下居中。我也想'.navbar品牌'为中心（如果我可以切换到UNDERNEATH的网站标志，这将是非常好的）

我发现了那些在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>

来源

2015-04-17 user3550879

你可以共享一个小提琴？ –

链接的文件过多以创建小提琴。我的文件是一个父母的孩子主题，所以CSS是在两者之间分割。好奇的其他技术已为人们工作，看看我是否可以在我的情况下操纵该代码 – user3550879

只要保持你的按键多了一个格内带班text-center

<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

来源

2015-04-17 06:16:30

我之前尝试过，因为它似乎是明显的答案，但它什么都不做。我认为有一些东西我不得不在自举代码中重写或者其他东西。 text-align：center似乎没有对任何navbar类做任何事 – user3550879

只需在'bootstrap.css'中找到'.text-center'类，然后尝试向其属性添加'！important' .. –

Infact 'text-center'可以工作，但问题是'.navbar-toggle'类被分配给button，它有一个名为'float：right'的属性，这个属性使按钮粘在容器的右侧。你也需要超越该财产！ –

或者：

.navbar-header { text-align: center; }

或：

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

.icon-bar { margin-left: auto; margin-right: auto; }

来源

2017-04-05 16:30:38 user3553860

将引导按钮置于Bootstrap 3中

回答

相关问题