我的导航标签和标签内容之间有一个很大的空间,我不知道为什么。
这是我的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;
}
}
我想删除这个巨大的空间。 任何帮助将不胜感激。
答案 0 :(得分:0)