Question

我已将图标设置为水平放置的导航栏。但是我在这些图标后添加了一些文字，解释了与图标相关的动作。

例如，＆＃39;家庭＆＃39;来自fa fa-home（FontAwesome）的图标，此图标背后的文字＆＃39; Home＆＃39;。只有在浏览器大小小于767像素宽度（twitter bootstrap响应）时才能看到文本。

我尝试了几种方法，但没有一种方法可行，例如$('.navbarText').text().hide();，$('a.navbarText').text().hide();，$('a text').text().hide();。我不记得我的所有尝试，但也尝试了一些纯粹的CSS方法。

我希望避免在其周围添加span或div。

有什么想法吗？

[编辑]一些额外的信息。这是渲染的html：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a class="dismissLbl" data-animation="true" data-delay="200" data-placement="bottom" data-title="Go to home page" data-trigger="hover" href="/" rel="tooltip"><i class="fa fa-home fa-lg"></i>Home</a></li>
     <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my service(s)" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-list fa-lg"></i>About</a>
    </li>
    <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my deals" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-thumbs-o-up fa-lg"></i>Contact</a>
    </li>

</ul>
</div>

@Hashem Qolami和Brian，当您将浏览器调整为更小的尺寸时，水平对齐的菜单将变成一个按钮，该按钮位于导航栏的右侧，您可以按此按钮并打开看起来像的菜单手风琴有关直观说明，请参阅以下屏幕截图。

normal size, meant for desktop view small size, meant for phones, tablets

至于为什么我不想在其周围添加span或div，原因是因为我使用@Html.ActionLink("linktext", "actionName")来呈现链接，每次浏览器加载或用户导航时，都需要一些jquery来围绕链接标记。更不用说还必须为每个链接标记执行检查，以检查它们是否已在每次页面加载或用户导航时被包围。

如果你问我，不必要的性能损失。

Answer 1

为什么不在CSS中使用媒体查询？

.text{ display: none; }
@media only screen and (max-width: 767px){ 
  .text{ display: block; }
}

Answer 2

考虑以下结构：

<a class="dismissLbl" href="#">
    <i class="fa fa-home fa-lg"></i> Home
</a>

如果不添加额外的元素，您可以通过font-size 0锚定标记，然后覆盖字体图标（嵌套<i>元素）上的值来实现这一目标：

a.dismissLbl { font-size: 0; }
a.dismissLbl .fa { font-size: 22px; }

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    a.dismissLbl,
    a.dismissLbl .fa {
        font-size: 16px; /* or whatever you want */
    }
}

最后，通过使用@media次问题，您可以重置font-size，以便在超小型设备上显示文字。

Answer 3

您可以使用CSS媒体查询和伪选择器轻松完成此操作：

View the example in Plunker

  // Common style for all button icons
  button { color:#000; font-size:24px; paddng:1em; border:none; background:none; cursor:pointer; }
  button:hover { color:#0088CC; }
  button span:after { padding-left:.5em; }

  // Text to display after each icon
  #menu span:after { content:"Menu"; }
  #home span:after { content:"Home"; }
  #mail span:after { content:"Mail"; }
  #account span:after { content:"Account"; }

  // Media Query to hide the text when viewport is less than 767px
  @media (max-width: 767px) {
    button span:after {
      content: ""!important;
    }
  }

Answer 4

使用empty（）函数。

$('.navbarText i').empty();

Answer 5

如果文本包含在dom元素中，请为其指定一个类并执行以下操作。

 $(window).resize(function() {
   doc_width = $(window).width();
    if(doc_width < 767){
      $(".mytext").hide();
    } else {
      $(".mytext").show();
    }

}

我在.resize中使用它只是使它成为一个函数..在.ready和.resize上调用它。

引导方式：

<div class="row">
 <div class="col-xs-12 col-sm-3">
   <img src="#" alt="icon">
  </div>
  <div class="hidden-xs col-sm-9">
    TEXT
  </div>
</div>

根据您的网格系统进行修改。

在链接标记中隐藏/显示文本，但不在响应模式下显示字体图标

5 个答案: