Question

我遇到以下引导导航问题：

1）在桌面上，当你点击每个标签时，它会向上跳一个像素。

2）在手机上，标签都被挤压在一起（见附图）

3）同样在移动设备上，堆叠时每张卡之间没有空间

4）在桌面和移动设备上，卡片不会一直排到左边缘。您可以看到“找到的75个结果”文本应该排成一行。

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

这是我的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

1）在你的css-code中，这一行让它跳起来：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-bottom: 3px solid #e9a39c;
}

2）标签占用css-code中屏幕的20％：

.nav-tabs > li {
    width: 20%;
}

3）你必须覆盖bootstrap.css代码，你必须在你的css代码中使用媒体查询。
媒体查询说明：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
将其添加到最后的css代码中，将 max-width 更改为您想要的内容：

@media screen and (max-width : 640px){

    img.img-responsive {
    margin-top: 20px !important;
    }

}

4）你必须覆盖bootstrap.css代码
将其添加到您的css代码：

.col-md-6 {
    padding: 0 !important;
    margin: 0 !important;
}

5）在你的css代码中添加一行：

.nav-tabs {
    text-align:left;
    width: 100%
}

Bootstrap导航问题（点击时跳起，移动设备无法正确渲染）

1 个答案: