6

Twitter Bootstrap を使用して作成されたサイトがあります。サイトに折りたたむボタンのグループがありますが、サイトが電話で表示されている場合のみです。したがって、ユーザーがコンピューターでサイトを表示している場合はすべてのボタンが表示されますが、電話を使用している場合は、「詳細」などのボタンが 1 つだけ表示され、それを押すとすべてのボタンが表示されます。

これまでのところ、私は持っています：

<div class="collapse-group">
  <ul class="menu row collapse" id="IndustriesMenu">
    <li><a class="btn" href="#">Button 1</a></li>
    <li><a class="btn" href="#">Button 2</a></li>
    <li><a class="btn" href="#">Button 3</a></li>
  </ul>
  <a class="btn" data-toggle="collapse" data-target="#IndustriesMenu">View details</a>
</div>

これは現在機能していますが、デフォルトでは、電話だけでなくすべてのデバイスでボタンが折りたたまれています。どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1

3

これが役立つかどうかを確認してください：http://jsfiddle.net/panchroma/7fYVD/

これは、 http://twitter.github.com/bootstrap/components.html#navbarのレスポンシブ ナビゲーション バーの簡略化されたバージョンです。

HTMLは以下です。

幸運を！

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".IndustriesMenu" style="color:black;">view details
      </a>
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse IndustriesMenu">
        <ul class="nav">
          <li><a href="#">Button 1</a></li>
          <li><a href="#">Button 2</a></li>
          <li><a href="#">Button 3</a></li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div><!-- /navbar-inner -->
</div>
于 2013-01-05T21:38:52.117 に答える