html - 如何添加箭头 Bootstrap 导航栏品牌

Question

如何使用 css 向导航栏品牌添加箭头(参见图片示例)

在移动设备 View 中，箭头不应可见。

以下内容不起作用 - 显然我不是最擅长的 CSS。

 .navbar-default {
        .navbar-brand {
                position: relative; 
                float: left;
                margin-right:30px;
                color: @navbar-default-brand-color;
                &:hover,
                &:focus {
                    color: @navbar-default-brand-hover-color;
                    background-color: @navbar-default-brand-hover-bg;
                }

                &:after {
                      content: " ";
                      display: block;
                      width: 0;
                      height: 0;
                      border-top: 19px solid transparent;
                      border-bottom: 19px solid transparent;
                      border-left: 12px solid @brand-secondary;
                      position: absolute;
                      top: 50%;
                      margin-top: -19px;
                      left: 100%;
                      z-index: 3;
                }


                &:before {
                      content: " ";
                      display: block;
                      width: 0;
                      height: 0;
                      border-top: 19px solid transparent;
                      border-bottom: 19px solid transparent;
                      border-left: 12px solid white;
                      position: absolute;
                      top: 50%;
                      margin-top: -19px;
                      margin-left: 1px;
                      left: 100%;
                      z-index: 3;
                }


               @media (max-width: @grid-float-breakpoint) {


               }
        }
    }

html如下

 <nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Bootstrap</a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
            <li class="active">
               <a href="#">Getting started</a>
            </li>
            <li>
               <a href="#">CSS</a>
            </li>
            <li>
               <a href="#">Components</a>
            </li>
            <li>
               <a href="#">Javascript</a>
            </li>
             <li>
               <a href="#">Customize</a>
            </li>
     </div>
  </div>
</nav>

更新:我已经设法使用之前和之后的 css 让它工作。我如何用媒体查询覆盖此 css，即媒体查询中的 css 是什么以在移动设备上将其删除？

Answer 1

已经创建了一个 fiddle ，其中包含如何为列表项执行此操作的示例代码。可以对其稍作编辑并重新应用到您的代码中以达到预期的效果。

都是关于 :before 和 :after 选择器的。

http://jsfiddle.net/dgc6ajbL/