引导标签不会移动内容 [英] Bootstrap tabs not moving content up
本文介绍了引导标签不会移动内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的标签内容显示但不正确，第二个标签内容在屏幕中间移动一半，我不知道为什么，这里是代码，任何帮助表示赞赏。
< 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 =stylesheettype =text / css/ >< link rel =stylesheethref =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-tabsid =white-bg> < li class =active>< a data-toggle =tabhref =＃1-1class =aria-expanded =true>概述< / a> < /锂> < li class =>< a data-toggle =tabhref =＃1-6class =aria-expanded =false>矿工< / a& < /锂> < / UL> < div class =tabs-content> < div id =1-1class =tab-pane fade active in> < div class =rowid =white-bg> < div class =col-xs-3> < div class =foodstuffs> < p style =color：white;>欢迎来到Dragon Fall 1.0版。确实存在一些我正在修复的错误，例如：< / p> <峰; br> < li style =color：white;>矿工数量不会更改他们贡献的价值< / li> < li style =color：white;>中间分隔线对齐< / li> < li style =color：white;> css过度< / li> <峰; br> < p style =color：white;>现在我只有两个矿工可用。在开发后期，这个窗格将包含食物和水以及其他统计数据。谢谢！ -Akmedrah< / p为H. < / DIV> < / DIV> < div class =col-xs-9> < div class =row> < div class =player-overview> < div class => < span class =cclstoneid =stonetitle =Curent Stone> 0< / span> < span class =cclwoodid =woodtitle =Curent Wood> 0< / span> < span class =cclcopperid =coppertitle =Curent Copper> 0< / span> < span class =cclironid =iron> 0< / span> < span class =cclsilverid =silver> 0< / span> < / DIV> < / DIV> < / DIV> < div class =row> < div class =col-xs-5> < div id =greenbox-lclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =greenbox-lclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =greenbox-lclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =greenbox-l-bclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < / DIV> < div class =col-xs-2> < div class => < div class =progress> < div class =progress-barrole =progressbarstyle =width：60％;> < span class =sr-only> 60％完成< / span> < / DIV> < / DIV> < / DIV> < / DIV> < div class =col-xs-5> < div id =green-box-rclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =green-box-rclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =green-box-rclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =green-box-r-bclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < / DIV> < / DIV> < div class =row> < div class =player-overview> < div class => < span class =cclcobaltid =cobalt> 0< / span> < span class =ccltitaniumid =titanium> 0< / span> < span class =cclmithrilid =mithril> 0< / span> < span class =ccladamantineid =adamantine> 0< / span> < span class =ccldraconiumid =draconium> 0< / span> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div id =1-6class =tab-pane fade> < div class =rowid =1-6fix> < div class =col-xs-12id =1-6fix> <按钮>试验< /按钮> < / DIV> < / DIV> < / DIV> < / div>
因此我已经耗尽了所有的资源来查看为什么这种方式不起作用。 $ b
解决方案
$ b
.fade.in {
display：block;
}
.fade {
display：none;
}
问题在于淡入只会使 div的不透明度＃1-1 改为0，这意味着它没有隐藏，并占用了页面上的空间。所以 div＃1-6 被推下。
.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 =stylesheettype =text / css/>< link rel =stylesheethref =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-tabsid =white-bg> < li class =active>< a data-toggle =tabhref =＃1-1class =aria-expanded =true>概述< / a> < /锂> < li class =>< a data-toggle =tabhref =＃1-6class =aria-expanded =false>矿工< / a& < / li>< / ul>< div class =tabs-content> < div id =1-1class =tab-pane fade active in> < div class =rowid =white-bg> < div class =col-xs-3> < div class =foodstuffs> < p style =color：white;>欢迎来到Dragon Fall 1.0版。确实存在一些我正在修复的错误，例如：< / p> <峰; br> < li style =color：white;>矿工数量不会更改他们贡献的价值< / li> < li style =color：white;>中间分隔线对齐< / li> < li style =color：white;> css过度< / li> <峰; br> < p style =color：white;>现在我只有两个矿工可用。在开发后期，这个窗格将包含食物和水以及其他统计数据。谢谢！ -Akmedrah< / p> < / DIV> < / DIV> < div class =col-xs-9> < div class =row> < div class =player-overview> < div class => < span class =cclstoneid =stonetitle =Curent Stone> 0< / span> < span class =cclwoodid =woodtitle =Curent Wood> 0< / span> < span class =cclcopperid =coppertitle =Curent Copper> 0< / span> < span class =cclironid =iron> 0< / span> < span class =cclsilverid =silver> 0< / span> < / DIV> < / DIV> < / DIV> < div class =row> < div class =col-xs-5> < div id =greenbox-lclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =greenbox-lclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =greenbox-lclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =greenbox-l-bclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < / DIV> < div class =col-xs-2> < div class => < div class =progress> < div class =progress-barrole =progressbarstyle =width：60％;> < span class =sr-only> 60％完成< / span> < / DIV> < / DIV> < / DIV> < / DIV> < div class =col-xs-5> < div id =green-box-rclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =green-box-rclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =green-box-rclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < div id =green-box-r-bclass => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < br class => < span id =woodclass =>测试< / span> < / DIV> < / DIV> < / DIV> < div class =row> < div class =player-overview> < div class => < span class =cclcobaltid =cobalt> 0< / span> < span class =ccltitaniumid =titanium> 0< / span> < span class =cclmithrilid =mithril> 0< / span> < span class =ccladamantineid =adamantine> 0< / span> < span class =ccldraconiumid =draconium> 0< / span> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div id =1-6class =tab-pane fade> < div class =rowid =1-6fix> < div class =col-xs-12id =1-6fix> <按钮>试验< /按钮> < / DIV> < / DIV> < / div>< / div>
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.
解决方案
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>
这篇关于引导标签不会移动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
