Question

我想把一个＆＃34; /＆＃34;在我的Bootstrap 3导航栏中的每个项目之间。

我认为问题是我的CSS。

我试图包含这块CSS。但是＆＃34; /＆＃34;超越导航栏项目：

.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>

codepen是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

Answer 2

在a代码

上应用此功能

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

.navbar-custom .navbar-links-custom li:last-child a:after{
    display: none;
}

你怎么把＆＃34; /＆＃34;在bootstrap导航栏中的每个项目之间？

2 个答案: