將引導按鈕置於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中

回答

相關問題