Twitter Bootstrap摺疊組僅在電話上

我有一個使用Twitter Bootstrap編寫的網站。我在網站上有一組按鈕，我只想在電話上查看網站時才摺疊。所以當用戶在他們的計算機上查看網站時，他們會看到所有的按鈕，但是當他們在手機上時，他們只會看到一個按鈕，顯示「更多詳情」，當他們按下時，所有按鈕都會顯示。Twitter Bootstrap摺疊組僅在電話上

到目前爲止我有：

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

目前這工作，但按鈕都按默認方式摺疊跨越並非所有的設備只是手機。任何幫助總是感激。謝謝。

來源

2013-01-04 DesignSubway

相關：http://stackoverflow.com/questions/15648067/auto-collapse-accordion-on-phones-with-css-or-js – trante

看看這可以幫助你：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-05 21:38:52

嗨大衛，帶着幾分修改的這個完美工作，我不知道爲什麼我一開始就沒有走這條路！謝謝。 – DesignSubway

太棒了，很高興我能幫上忙 –

Twitter Bootstrap摺疊組僅在電話上

回答

相關問題