html - 无法使用 Bootstrap 解决方案使不使用导航栏类的菜单居中

标签 html css twitter-bootstrap menu centering

注意:您可以在以下位置看到格式正确的菜单文本与移位的菜单文本的图像:http://i.imgur.com/ubBbQB4.png

第二次编辑: 注意从原始页面添加的页面源代码。这个问题的 HTML 最初是针对 Header.php 文件的。第二次 EDIT HTML 来自页面源代码，在进行建议更改之前——最值得注意的是，“span3”和“logo”div 已从 header HTML 中删除，因为它们阻止了菜单向左移动。我在一个没有答案的早期问题中发布了这段代码。

希望这可能有助于找出为什么子菜单文本不会出现在框中。谢谢。 

<header style="opacity: 1; margin-top: 0px; ">
<div class="container">
    <div class="row">

    <div class="span3">
    <div id="logo">
            <a href="SITE URL">

                                    </a>
    </div>
    </div>

    <div class="span9">
        <!-- Mobile Menu -->
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>

        <!-- Standard Menu -->
        <div id="menu">
            <ul id="menu-nav" class="sf-js-enabled">
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-14"><a href="SITE URL">Home<mark class="bar"></mark></a></li>
<li id="menu-item-266" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a href="SITE URL?page_id=252">About<mark class="bar"></mark></a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="SITE URL?page_id=11">Blog<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"><a href="SITE URL?page_id=196">SITE NAME<mark class="bar"></mark></a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 20em; display: none; visibility: hidden; ">
<li id="menu-item-569" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-569" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-565" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-565" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-454" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="SITE URL?page_id=257">Contact<mark class="bar"></mark></a></li>

            </ul>
        </div>
    </div>

    </div>
</div>

编辑:

@davidpauljunior 感谢您的快速帮助。不幸的是，在尝试了几次之后，它对我没有用。我想我知道为什么它对我不起作用。我从主题的头文件中输入了标记，但我从 TB CSS 上传了 CSS 而不是主题的 CSS，主题的 CSS 本身很可能已经进行了调整。如果你能原谅这个错误，我将在下面再次破解它。我会在评论中这样做，但它不允许这么长的代码。注意标记为编辑的部分。希望我没有浪费任何善意。谢谢。

––––––––––––––––––––

我有一个基于 Twitter Bootstrap 的 WP 主题，主题的作者没有使用菜单的导航栏类。相反，它只使用标题和#menu 以及导航的细微变化。我的问题是标准菜单由两部分组成:左侧的 Logo 和右侧的菜单，右对齐。

我没有使用 Logo ，所以我希望菜单水平居中。我已经尝试了很多在这里找到的居中方法，但都没有用。我认为这可能与主题使用“span3”作为 Logo 这一事实有关。我去了 header.php 文件并将其编辑掉。菜单现在一直移动到 Logo 位置的左对齐位置。这是进步，但我仍然没有找到将 Logo 居中放置在顶部的方法。我已经尝试应用许多用于“导航栏”的居中代码位，但没有一个可以解决问题。

这是我删除 Logo div 后的页眉 php 标记。 

<!-- Header -->
<header>
    <div class="container" style="width: 100%;">
        <div class="row">



        <div class="span9"  style="width: 100%; text-align: center;">
            <!-- Mobile Menu -->
            <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>

            <!-- Standard Menu -->
            <div id="menu">
                <ul id="menu-nav">
                <?php 
                    if(has_nav_menu('primary_menu')) {
                    wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s', 'link_after' => '<mark class="bar"></mark>' ) ); 
                    }
                    else {
                    echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>  
                </ul>
            </div>
        </div>

        </div>
    </div>
</header>
<!-- End Header -->

<!-- Mobile Navigation Mobile Menu -->
<div id="navigation-mobile">
    <div class="container">
        <div class="row">
            <div class="span12">
                <ul id="menu-nav-mobile">
                <?php 
                    if(has_nav_menu('primary_menu')) {
                    wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
                    }
                    else {
                    echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>  
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- End Navigation Mobile Menu -->

菜单的其余部分在“span9”类下——我试图看看将其更改为“span12”是否有帮助，但没有任何效果。我对此很陌生，但我正在努力理解。我应该在 header.php 和 CSS 样式文件中这样做吗？或者这一切都可以在头文件中的标记中或仅在 CSS 自定义中完成吗？

编辑:这是标题的 CSS 样式表部分 [编辑-来自主题本身]:

/* Navigation */

#menu {
    float: right;
}

/* Sub-Menu */

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    position: relative;
    float: left;
    margin: 0 15px;
    line-height: 160px;
    z-index: 40;
}

#menu ul li:last-child {
    margin-right: 0;
}

#menu ul a {
    position: relative;
    display: block;
    color: #B2B2B6;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#menu ul li:hover { visibility: inherit; }

#menu ul ul {
    position: absolute;
    top: -9999em;
    width: 220px !important;
}

#menu ul ul li {
    width: 100%;
}

#menu ul ul li .bar {
    display: none;
}

#menu ul li:hover ul,
#menu ul li.sfHover ul {
    top: 160px;
    left: -20px;
    z-index: 99;
}

#menu ul a:hover,
#menu ul li.sfHover a,
#menu > ul li.current-cat a,
#menu > ul li.current_page_item a,
#menu > ul li.current-menu-item a,
#menu ul li.current-page-ancestor a,
#menu ul li.current-menu-ancestor a {
    color: #56646F;
}

#menu ul li a .bar {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 6px;
    background: #F88A79;
    opacity: 0;
    -webkit-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    -moz-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    -o-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
}

编辑:这是我对菜单的自定义，以我想要的方式设计它的样式——一切都以这种方式运行和看起来都很好，只是它没有居中。 (抱歉，我不知道展示所有这些的最佳方式——我希望我没有因为没有正确发布而违反这里的一些礼节):

#menu {
width: 100%;
float: left;
margin: 0 auto;
}

#menu-nav {
text-align: center;
}

#menu menu-nav ul  {
    float:none;
    display:inline-block;
    text-align: center;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

#menu ul { 
display:inline-block; 
}

#menu ul { 
display:inline; 
zoom:1;
}

#menu ul li a .bar {
height: 50px;
}

#menu ul li.sfHover ul {
    top: 100px;
    left: -20px;
    z-index: 99;
}


#menu-nav{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
}



#menu ul a {
    position: relative;
    display: block;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#menu ul .sub-menu li a {
    color: #989898;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 5px 20px;

    -webkit-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    -moz-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    -o-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
}

我希望有人能对此有所启发。几个星期以来，我一直在努力让它发挥作用。提前谢谢了。

最佳答案

随着这个问题的发展和发展，我选择添加另一个答案。

这里的第一个问题是您的 HTML 不正确。有一个额外的 <li>和 <ul>在那里。我在底部的演示中将它们注释掉了。

其次，围绕样式存在很多混淆。 您也有选择器错误，例如 #menu menu-nav ul (缺少 . )。

我认为主题是无法触及的，目的是用您自己的主题定制覆盖它。既然如此:

  1. 删除所有内联样式，这是不好的做法。
  2. 根据下面演示中的 CSS 更改您的样式。

http://jsbin.com/UVaZUki/1/edit

关于html - 无法使用 Bootstrap 解决方案使不使用导航栏类的菜单居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19942177/

上一篇：html - 两个 float 的 div，一左一右。我如何强制他们留在一条线上？

下一篇：html - Bootstrap 导航栏折叠框模型奇怪

相关文章：

html - 如何使用 Bootstrap 减少两列之间的过多空间

php - 针对不同尺寸对齐/排序 HTML 中的图像

html - 将 div 大小设置为标题 div 的百分比

javascript - 通过按键选择 Bootstrap 下拉值

html - 跨越两个跨越 div 的跨度背景，bootstrap

regex - 如何使用 HTML5 输入验证来验证表单输入

javascript - 当我们点击为复选框分配的标签时，Chrome 和 IE 不会按时触发更改事件

javascript - Owl Carousel 在滑动到第三个元素时隐藏第二个元素

html - HAML 和 HTML - 无法正确复制

javascript - 使用javascript在声明的变量中创建按钮

©2024 IT工具网  联系我们