logo标签列表

如何在Bootstrap导航栏品牌中添加箭头

htmlcsstwitter-bootstrapnavbar
3
如何使用CSS在导航栏品牌上添加箭头（参见图像示例）

enter image description here

箭头在移动视图中不应可见。
以下代码不起作用 - 显然我不是最擅长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>

更新：我已经使用before和after css使其正常工作。如何使用媒体查询覆盖此css，即在移动设备上删除它的css是什么？

你尝试在CSS中使用@media了吗？ - Ahs N
你能制作一个Fiddle吗？上面的代码没有给我们太多可以使用的东西。 - Matthew
1个回答
2

我已经创建了一个小的范例代码，演示如何对列表项进行操作。您可以稍加修改并应用到您的代码中，以达到所需的效果。

关键在于使用:before和:after选择器。

http://jsfiddle.net/dgc6ajbL/

我只想将其应用于导航栏品牌，而不是列表项。我尝试了在bootsnip上找到的面包屑示例，但我不太明白如何将其应用于导航栏品牌。 - adam78
虽然这理论上回答了问题，但最好在此处包含答案的关键部分（CSS），并提供参考链接。 - Léo Lam
@ozzii 是的。实际上，当我发布代码时，我意识到它比我想象的要难实现得多。这是我目前能够做到的最接近的版本，因为我要出门了。希望对你有所帮助。http://jsfiddle.net/ge7v7g89/1/ - Jay
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接