4

ナビゲーション バーのトグル ボタンの横にあるナビゲーション バーに表示される電話番号を表示したいと思います。トグル ボタンは、ナビゲーション バーが折りたたまれた状態になったときにのみ表示されます。その横にテキストを表示したいと思います。

これが私が今持っているものです：

折りたたまれたナビゲーションバー

そして、これが私が達成しようとしていることです：

テキスト付きの折りたたまれたナビゲーションバー

関連する div からの HTML:

<div class="header-centered"><img src="http://placehold.it/350x150"></div>
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
          <li><a href="#">Link4</a></li>
          <li><a href="#">Link5</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

ナビゲーションバーが折りたたまれていない限り、テキストを表示したくありません。これはどのように達成できますか？

4

5 に答える 5

3

次のように、CSS によってテキストの可視性を制御できます。

.abcde .text {
  display: none;
}
.abcde.collapse .text {
  display: inline-block;
}
于 2013-02-20T20:17:50.553 に答える
1

この状況を処理する方法が多すぎます。

  1. Display: none;これはブラウザフレンドリーであり、永久に非表示の状態であるため、要素を想定しなくなりました。
  2. Visibility: hidden;ドキュメントの任意の要素を非表示にできますが、それでも制限があります。ブラウザはページ上でその要素を見つけてから、その要素を非表示にする必要があります。したがって、数ミリ秒の間ですが、これを隠すために少し作業する必要があります。
  3. font-size: 0;折りたたんだ状態で保管してご使用font-size: 1em;ください。
  4. キープopacity: 0して後でopacity: 1。
  5. postion: absolute; left:-99999em;そしてそしてその後left:0;
  6. 要素を配置した場合は、z-index を使用できます。要素を順番に積み重ねることもできます。

最後に、ドキュメントの要素を非表示および表示する方法がたくさんあります。何を選ぶかはすべてあなた次第です。しかし、私によるとDisplay: none;、あなたのプロジェクトに最適なものです。

于 2013-02-23T05:48:30.240 に答える
1

grid-float-breakpoint を使用して折りたたみ要素を処理するブートストラップ方法を使用したいユーザーのために、この回答を追加しています。これは、ナビゲーションバーが折りたたまれなくなるポイントです。

したがって、バーが折りたたまれているときにのみ表示される要素が必要な場合は、collapsed-addonクラスを追加し、この css を含めます。

デフォルトの gird-float-breakpoint 値は、768px の screen-sm-min に設定されています

@media (min-width: 768px){
  .collapsed-addon {
    display: none;
}

一部のプロセッサを使用している場合は、css 変数 grid-float-breakpoint を使用します

@media (min-width: $grid-float-breakpoint){
  .collapsed-addon {
    display: none;
  }
}
于 2015-10-14T09:28:20.797 に答える