html - 导航选项卡和选项卡内容之间的空间

Question

我的导航标签和标签内容之间有一个很大的空间，我不知道为什么。

这是我的html代码

 <div class="col-sm-offset-2">
            <?php 
                if(is_array($group_content) || is_object($group_content)){
                    foreach($group_content as $object_group){
                        echo'<h1 class="text-center">'. $object_group->group_name .'</h1>';
                    }
                } 
            ?>

            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#post" data-toggle="tab">POST</a></li>
                <li class=""><a href="#event" data-toggle="tab">EVENTS</a></li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="post">
                     <div class="form-group">   
                        <form class="form-horizontal" method="POST" action="<?php echo base_url('Home/post'); ?>" enctype="multipart/form-data" data-parsely-validate>
                            <div class="input-group input-group-lg">
                                <textarea class="form-control" rows="3" id="textArea" name="inputPost" maxlength="255"></textarea>
                                <span class="input-group-btn">
                                    <button type="submit" class="btn btn-default" name="action">Post</button>
                                </span>
                            </div>
                        </form>
                    </div>
                    <?php
                        if(is_array($home_contents) || is_object($home_contents)){
                            foreach($home_contents as $object_home){
                                echo'<div>
                                    <blockquote>
                                        <p>' . $object_home->post_content .'</p>
                                        <small>' . $object_home->poster_name . '</cite></small>
                                    </blockquote>
                                </div>';
                            }
                        }
                    ?>
                </div>

                <div class="tab-pane fade active in" id="event">
                     <div class="form-group">   
                        <form class="form-horizontal" method="POST" action="<?php echo base_url('Home/post'); ?>" enctype="multipart/form-data" data-parsely-validate>
                                <textarea class="form-control" rows="3" id="textArea" name="inputPost" maxlength="255"></textarea>
                                <button type="submit" class="btn btn-default pull-right" name="action">Post</button>
                        </form>
                    </div>
                    <?php
                        if(is_array($home_contents) || is_object($home_contents)){
                            foreach($home_contents as $object_home){
                                echo'<div>
                                    <blockquote>
                                        <p>' . $object_home->post_content .'</p>
                                        <small>' . $object_home->poster_name . '</cite></small>
                                    </blockquote>
                                </div>';
                            }
                        }
                    ?>
                </div>
            </div>
        </div>

这是我的导航标签的 css

.nav-tabs {  border-bottom: 1px solid #dfd7ca;}
.nav-tabs > li {
  float: left;
 margin-bottom: -1px;
   text-align: center;
 }
 .nav-tabs > li > a {
   margin-right: 2px;
   line-height: 1.42857143;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
 }
 .nav-tabs > li > a:hover {
   border-color: #dfd7ca #dfd7ca #dfd7ca;
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #98978b;
   background-color: #ffffff;
   border: 1px solid #dfd7ca;
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
   float: none;
 }
 .nav-tabs.nav-justified > li > a {
   text-align: center;
   margin-bottom: 5px;
 }
 .nav-tabs.nav-justified > .dropdown .dropdown-menu {
   top: auto;
   left: auto;
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li {
     display: table-cell;
     width: 1%;
   }
   .nav-tabs.nav-justified > li > a {
     margin-bottom: 0;
   }
 }
 .nav-tabs.nav-justified > li > a {
   margin-right: 0;
   border-radius: 4px;
 }
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
   border: 1px solid #dfd7ca;
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
     border-bottom: 1px solid #dfd7ca;
     border-radius: 4px 4px 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
   .nav-tabs.nav-justified > .active > a:focus {
     border-bottom-color: #ffffff;
   }
 }

我想删除这个巨大的空间。任何帮助将不胜感激。

Answer 1

你必须给 float:left; 到 .nav-tabs。

Jsfiddle

.nav-tabs.nav-justified
{
    float: left !important;
}