html - 如何在 Bootstrap 导航栏中的每个元素之间放置 "/"？

Question

我试图在我的 Bootstrap 3 导航栏中的每个元素之间放置一个“/”。

我认为问题出在我的 CSS 上。

我试图包含这段 CSS。然而，“/”位于导航栏元素之上:

.navbar-custom .navbar-links-custom li:before{
    content: " / ";
}

HTML:

<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset-top="50">
    <div class="container">
        <div class="row">
            <div class="navbar-header navbar-header-custom">
                <button type="button" class="navbar-toggle collapsed menu-icon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul id="menu-main-menu" class="nav navbar-nav navbar-right navbar-links-custom">
                    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-41 current_page_item menu-item-43"><a href="#">Home<span></span></a></li>
                    <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#">About<span></span></a></li>
                    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="#">Services<span></span></a></li>
                    <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48 dropdown submenu"><a href="#">Blog<span></span></a>
                        <ul class="dropdown-menu">
                            <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="https://ecohotels-landingpage-jafar70.c9users.io/blog-grid/">Blog Grid</a></li>
                            <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://webpentagon.com/demo/themeforest/wordpress/specialists/lorem-ipsum-dolor/">Blog Post</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-49 dropdown submenu"><a href="#">Pages<span></span></a>
                        <ul class="dropdown-menu">
                            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="https://ecohotels-landingpage-jafar70.c9users.io/about-team/">About Team</a></li>
                            <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="http://webpentagon.com/demo/themeforest/wordpress/specialists/404/">404</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="https://ecohotels-landingpage-jafar70.c9users.io/contact/">Contact<span></span></a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

代码笔是https://codepen.io/anon/pen/dJBzZy

Answer 1

您需要稍微更改您的 css 并确保/定位正确，例如使用 position: absolute:

.navbar-custom .navbar-links-custom li {
  padding: 0 5px 0 5px;
  position: relative;
}

.navbar-custom .navbar-links-custom li:before{
    content: " / ";
    position: absolute;
    right: 0;
    top : 15px;
}

编辑:Codepenlink:https://codepen.io/anon/pen/LeKjqV