问题
The content of my tabs is displaying but not properly, the second tabs content is moved about halfway down the screen and I don't know why, here is the code, any help is appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="white-bg">
<li class="active"><a data-toggle="tab" href="#1-1" class="" aria-expanded="true">Overview</a>
</li>
<li class=""><a data-toggle="tab" href="#1-6" class="" aria-expanded="false">Miners</a>
</li>
</ul>
<div class="tabs-content">
<div id="1-1" class="tab-pane fade active in">
<div class="row" id="white-bg">
<div class="col-xs-3">
<div class="foodstuffs">
<p style="color:white;">Welcome to Dragon Fall Version 1.0. Curently there are some errors that I am in the process of fixing such as:</p>
<br>
<li style="color:white;">number of miners does not change the value they contribute</li>
<li style="color:white;">middle divider alignment</li>
<li style="color:white;">css is excessive</li>
<br>
<p style="color:white;">for now I only have two miners available. Later in developement this pane will contain food and water and other statistics. Thanks!
-Akmedrah</p>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclstone" id="stone" title="Curent Stone">0</span>
<span class="cclwood" id="wood" title="Curent Wood">0</span>
<span class="cclcopper" id="copper" title="Curent Copper">0</span>
<span class="ccliron" id="iron">0</span>
<span class="cclsilver" id="silver">0</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
<div class="col-xs-2">
<div class="">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;"> <span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
</div>
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclcobalt" id="cobalt">0</span>
<span class="ccltitanium" id="titanium">0</span>
<span class="cclmithril" id="mithril">0</span>
<span class="ccladamantine" id="adamantine">0</span>
<span class="ccldraconium" id="draconium">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="1-6" class="tab-pane fade">
<div class="row" id="1-6fix">
<div class="col-xs-12" id="1-6fix">
<button>test</button>
</div>
</div>
</div>
</div>I am relatively new to programming and have thus far exhausted all my resources for seeing why this isn't working.
回答1:
Add this css:
.fade.in {
display:block;
}
.fade {
display:none;
}
The problem was that fade was only making the opacity of the div#1-1 to 0, which meant that it was not hidden and was taking up space on the page. So div#1-6 was getting pushed down.
.fade.in {
display: block;
}
.fade {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="white-bg">
<li class="active"><a data-toggle="tab" href="#1-1" class="" aria-expanded="true">Overview</a>
</li>
<li class=""><a data-toggle="tab" href="#1-6" class="" aria-expanded="false">Miners</a>
</li>
</ul>
<div class="tabs-content">
<div id="1-1" class="tab-pane fade active in">
<div class="row" id="white-bg">
<div class="col-xs-3">
<div class="foodstuffs">
<p style="color:white;">Welcome to Dragon Fall Version 1.0. Curently there are some errors that I am in the process of fixing such as:</p>
<br>
<li style="color:white;">number of miners does not change the value they contribute</li>
<li style="color:white;">middle divider alignment</li>
<li style="color:white;">css is excessive</li>
<br>
<p style="color:white;">for now I only have two miners available. Later in developement this pane will contain food and water and other statistics. Thanks! -Akmedrah
</p>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclstone" id="stone" title="Curent Stone">0</span>
<span class="cclwood" id="wood" title="Curent Wood">0</span>
<span class="cclcopper" id="copper" title="Curent Copper">0</span>
<span class="ccliron" id="iron">0</span>
<span class="cclsilver" id="silver">0</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
<div class="col-xs-2">
<div class="">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;"> <span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
</div>
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclcobalt" id="cobalt">0</span>
<span class="ccltitanium" id="titanium">0</span>
<span class="cclmithril" id="mithril">0</span>
<span class="ccladamantine" id="adamantine">0</span>
<span class="ccldraconium" id="draconium">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="1-6" class="tab-pane fade">
<div class="row" id="1-6fix">
<div class="col-xs-12" id="1-6fix">
<button>test</button>
</div>
</div>
</div>
</div>来源：https://stackoverflow.com/questions/34249200/bootstrap-tabs-not-moving-content-up