引导选项卡不向上移动内容答案

【问题标题】：Bootstrap tabs not moving content up引导选项卡不向上移动内容
【发布时间】：2015-12-13 08:12:27
【问题描述】：

我的标签内容显示但不正确，第二个标签内容移动到屏幕的一半左右，我不知道为什么，这是代码，感谢任何帮助。

<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>

我对编程比较陌生，到目前为止，我已经用尽了我所有的资源来看看为什么这不起作用。

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3 tabs

【解决方案1】：

添加这个css：

.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" 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>

【讨论】：