Twitter Bootstrap Collapse Chỉ có trên điện thoại

Question

Tôi có một trang web được viết bằng cách sử dụng Twitter Bootstrap. Tôi có một nhóm các nút trên trang web mà tôi muốn thu gọn nhưng chỉ khi trang web được xem trên điện thoại. Vì vậy, khi người dùng đang xem trang web trên máy tính của họ, họ sẽ thấy tất cả các nút nhưng khi họ đang ở trên điện thoại, họ sẽ chỉ nhìn thấy một nút có nội dung 'chi tiết hơn' và khi họ nhấn tất cả các nút sẽ hiển thị.

Cho đến nay tôi đã có:

<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> 

này hiện đang hoạt động nhưng các nút theo mặc định trên tất cả các thiết bị sụp đổ không chỉ là điện thoại. Mọi trợ giúp luôn được đánh giá cao. Cảm ơn bạn.

Answer 1

Xem nếu điều này giúp bạn: http://jsfiddle.net/panchroma/7fYVD/

Đó là một phiên bản đơn giản của navbar đáp ứng trên http://twitter.github.com/bootstrap/components.html#navbar

HTML dưới đây.

Chúc may mắn!

<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>