モバイルでは、ブートストラップナビゲーションタブを縦に積み重ねるにはどうすればいいですか？

Question

私は5つのブートストラップナビゲーションタブを均等に配置していて、デスクトップ上で大きく見えます。モバイルでは、タブのテキストが一緒に盛り上がります。モバイルでは、タブを縦に積み重ねるにはどうすればよいですか？

私は携帯電話でスタックする5つのタブが欲しいので、それはページの真ん中にあります。ここで

は私のbootplyです： http://www.bootply.com/nM8Q1MftKU

ここに私のHTMLです：

<div class="content-section-c"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h2>Sample Search Results</h2> 
     </div> 
     <div class="tabbable"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#pane1" data-toggle="tab">ELECTRONIC<br>APPLE TREES</a></li> 
      <li><a href="#pane2" data-toggle="tab">CROSSING GUARD<br>ORANGE TREES</a></li> 
      <li><a href="#pane3" data-toggle="tab">POLICE BODY<br>PEARS TREES</a></li> 
      <li><a href="#pane4" data-toggle="tab">PARKING METERS<br>&nbsp;</a></li> 
      <li><a href="#pane4" data-toggle="tab">TRANSPORTATION<br>GRAPES TREES</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div id="pane1" class="tab-pane active"> 
      <p class="results">126 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
      </div> 
      <div id="pane2" class="tab-pane"> 
      <p class="results">75 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div> 
      </div> 
      <div id="pane3" class="tab-pane"> 
      <p class="results">144 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div> 
      </div> 
      <div id="pane4" class="tab-pane"> 
      <p class="results">170 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
      </div> 
      <div id="pane5" class="tab-pane"> 
      <p class="results">256 Results Founds</p> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div> 
      <div class="col-md-6 col-xs-12"> 
       <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
      </div> 
     </div> 
     <!-- /.tab-content --> 
     </div> 
     <!-- /.tabbable --> 
    </div> 

    </div> 
    <!-- /.container --> 
</div> 
<!-- /.content-section-c --> 

は、ここに私のCSSです：

.content-section-c { 
    padding: 50px 0; 
    background-color: #d4d4d4; 
} 
h2 { 
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    color: #3C5A78; 
    line-height: 1; 
    text-align: center; 
    padding: 0 0 16px 0; 
} 
.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover { 
    border-top: none; 
    border-left: none; 
    border-right: none; 
    border-bottom: 3px solid #e9a39c; 
    font-weight: bold; 
    background-color: #d4d4d4 !important; 
} 
.nav-tabs>li>a:hover { 
    border: 1px solid transparent; 
} 

.nav>li>a:focus, 
.nav>li>a:hover { 
    background-color: #d4d4d4; 
} 
.nav-tabs { 
    border-bottom: none; 
    display: inline-block; 
    /* needed to center the list items */ 
} 
.tabbable { 
    text-align: center; 
} 
.results { 
    font-family: 'Merriweather', serif; 
    font-weight: 300; 
    color: #355A78; 
    font-size: 16px; 
    margin: 20px 0 5px 0; 
    text-align: left; 
} 
.nav-tabs { 
    width: 100% 
} 
.nav-tabs > li { 
    width: 20%; 
} 

Answer 1

あなたが崩壊ナビゲーションバーを考慮することができます。あなたの例をbootplyで見てください。小さな画面では、1つの垂直線にすべての可能なリンクを表示するのではなく、ナビゲーションバーのナビゲーションを開くための3本の垂直線があります。

デスクトップ： モバイル：

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#pane1" data-toggle="tab">ELECTRONIC<br>APPLE TREES</a></li> 
      <li><a href="#pane2" data-toggle="tab">CROSSING GUARD<br>ORANGE TREES</a></li> 
      <li><a href="#pane3" data-toggle="tab">POLICE BODY<br>PEARS TREES</a></li> 
      <li><a href="#pane4" data-toggle="tab">PARKING METERS<br>&nbsp;</a></li> 
      <li><a href="#pane4" data-toggle="tab">TRANSPORTATION<br>GRAPES TREES</a></li> 
     </ul> 

    </div> 
    </div> 
</nav> 

Answer 2

変更NAV-タブの幅>モバイルサイズのリチウム

@media screen and (max-width:767px){ 
    .nav-tabs > li {width:100%;} 
}