Html 如何添加箭头引导navbar品牌

如何使用css将箭头添加到navbar品牌（参见图像示例）

在移动视图中，箭头不应可见

下面的方法行不通——很明显，我不是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是什么？

创建了一个示例代码，介绍了如何对列表项执行此操作。可以对其进行轻微编辑，然后重新应用到代码中，以获得所需的效果

这都是关于

：before

和

：after

选择器的

---

您是否尝试在css中使用@media？您能做一把小提琴吗？上面的代码并没有给我们太多的帮助。我只希望它应用于navbar品牌，而不是列表项。我试过bootsnip上的面包屑示例，但我不太明白如何将其应用于navbar品牌。虽然这在理论上可以回答这个问题，但在这里包括答案的基本部分（CSS），并提供链接以供参考。@ozzii Yeah。实际上，实现起来比我发布代码时意识到的要困难得多。这是我现在能得到的最接近的了，因为我要出发了。我希望这能有所帮助。