Question

我希望在屏幕变小时隐藏单词，Home / Reservations / myReservations / About / Settings但我希望图标在较小的屏幕上仍然可见。我目前正在使用：

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div id='test' ng-click="doTheBack()"><a class="navbar-brand"><i class="fa fa-arrow-left"></i>Back</a></div>
         <div class="nav navbar-nav navbar-left">


        </div>
      <div>
  <ul class="nav navbar-nav navbar-right">
    <a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i>Home</a>
    <a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> Reservation</a>
    <a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i> MyReservations</a>
    <a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> About</a>
    <a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> Settings</a>

  </ul>
</div>

Answer 1

将a＆＃39; s font-size属性设置为0，然后将图标字体大小设置回所需的数量

代码：

@media (max-width:550px) {
  a {
      font-size: 0px !important;
  }

   a i {
      font-size: 20px !important;
   }
}

example您需要将屏幕大小调整为550px以下才能实现效果。

Answer 2

你需要在一个范围中包装这些单词并给它们一个类似的类：

<a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i><span class="link-title">Home</span></a>
<a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> <span class="link-title">Reservation</span></a>
<a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i><span class="link-title">My Reservations</span></a>
<a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> <span class="link-title">About</span></a>
<a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> <span class="link-title">Settings</span></a>

然后，使用CSS媒体查询，隐藏具有指定类的元素（在此示例中为“link-title”）：

@media all and (max-width: 600px) {
    .link-title {
        display: none;
    }
}

Answer 3

使用 hidden-sm hidden-xs 类引导程序，您可以轻松实现此目的。

<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand visible-lg" href="/landingIndex.html">
 <i class="fa fa-home"></i>
  <span class="hidden-sm hidden-xs">Home</span>
</a>
<a class="navbar-brand" href="#">
  <i class="fa fa-calendar-o"></i> 
  <span class="hidden-sm hidden-xs">Reservation</span>
</a>
<a class="navbar-brand" href="#myReservation">
   <i class="fa fa-list"></i> 
   <span class="hidden-sm hidden-xs">MyReservations</span>
</a>
<a class="navbar-brand" href="#about">
   <i class="fa fa-shield"></i> 
   <span class="hidden-sm hidden-xs">About</span>
</a>
<a class="navbar-brand" href="#settings">
   <i class="fa fa-gear"></i> 
   <span class="hidden-sm hidden-xs">Settings</span>
</a>
</ul>

如何隐藏文本但在小屏幕上保留图标？

3 个答案: