Question

我希望我的五个bootstrap导航标签能够均匀地分布在容器中。目前它们位于中间，但是标签的左侧和右侧有很多空白区域。

另外，对于我的结果文本，在移动设备上屏幕左侧没有空格。我希望这与卡的左侧对齐。但它在左边太远了。

这是我的bootply： http://www.bootply.com/EJO7TvV3B3

这是我的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">APPLE<br>
                TREES
                               </a></li>
            <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li>
            <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li>
            <li><a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a></li>
            <li><a href="#pane4" data-toggle="tab">GRAPE<br> 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;
}

Answer 1

好的，这不是一个小答案，但它可以帮助你了解你的问题所在。

首先，我看到一些滥用Bootstrap代码和包装器的行为：

第二行有一个容器<div class="container">，它包含了你们所有人的代码。这是有效的，但这并不是container包裹所有你的代码的目的。你已经有了一个包装<div class="content-section-c">所以为什么要使用第二个，或者你的例子甚至是第三个<div class="tabbable">？
使用<div class="container">时，您将被限制为容器的宽度，最大为1170px。这就是为什么你在导航的左右边缘有这么大的余量。 Bootstrap有一个类容器流体<div class="container-fluid">，它占据了屏幕的整个宽度。因此，在您的示例中，我将使用该类作为导航部分

使用上面的评论修复您的代码，您可以将导航更改为：

<div class="content-section-c">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h2>Sample Search Results</h2>
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#pane1" data-toggle="tab">APPLE<br>TREES</a>
          </li>
          <li>
            <a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a>
          </li>
          <li>
            <a href="#pane3" data-toggle="tab">PEARS <br> TREES</a>
          </li>
          <li>
            <a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a>
          </li>
          <li>
            <a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a>
          </li> 
        </ul>
      </div>
    </div>
  </div>

现在导航栏被拉到左侧，这是正常行为，因为您没有对ul和li进行任何设置，因此更改css出价会将其修复为

.content-section-c {
    padding: 50px 0;
    background-color: #d4d4d4;
    text-align: center;
}

.content-section-c ul {
    width: 100%  
}

.content-section-c ul li {
  margin: 3%;
  width: 14%;

}

为了详细解释上面的css，首先你有一个类.tabbable {text-align: center;}但是我们删除了那个包装器（因为你已经有了一个）现在你必须将这个样式text-align:center添加到包装器中保持content-section-c。

赋予ul 100％的宽度，使其占据所有宽度。

你可以给li一个20％的宽度，因为你使用活动列表项的下划线，下面的行实际上需要20％而且这不是很好。所以我做了一些CSS技巧并在列表项上添加了一些余量。

请注意，您需要使用一些@media查询在较小的屏幕上删除该边距

这实际上是你的问题不是吗？还是给你一些额外的提示和信息，我可以告诉你：

引导程序container实际上是row元素的容器并且引导程序row实际上是列col-*-*

来源：when-should-i-use-class-container-and-row

因此，如果你看看其他人的代码，你可以做这样的事情。将每个（列）组放在一行中。

  <div class="tab-content">
     <div class="container">
       <div class="row">
         <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>

在这里你有一个bootply与你以前的代码清理，祝你好运！

Bootply

Answer 2

我纠正了。希望你这样想。

＆＃13;

/* CSS used here will be applied after bootstrap.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;
}
ul.nav{
  width:100%;
}
.nav-tabs>li {
    width: 20%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <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">APPLE<br>
                    TREES
                                   </a></li>
                <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li>
                <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li>
                <li><a href="#pane4" data-toggle="tab">BANANAS<br>&nbsp;</a></li>
                <li><a href="#pane4" data-toggle="tab">GRAPE<br> 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 -->

＆＃13;

如何增加引导程序导航选项卡之间的间距？

2 个答案: