Question

我有五个均匀分布的bootstrap导航标签，在桌面上看起来很棒。在移动设备上，标签的文字会被挤压在一起。在移动设备上，如何使标签垂直堆叠？

它位于页面中间，所以我希望在移动设备上堆叠五个标签页。

这是我的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上查看您的示例。在小屏幕上，将有三条垂直线打开导航栏导航，而不是在一条垂直线上显示所有可能的链接。

桌面：移动设备：

 <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

更改导航标签的宽度＆gt; li在移动尺寸

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

在移动设备上，如何垂直堆叠引导导航标签？

2 个答案: