选项卡和选项卡内容之间的空间答案

【问题标题】：Space between tabs and tab-content选项卡和选项卡内容之间的空间
【发布时间】：2011-12-15 05:24:03
【问题描述】：

我有以下代码：

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap</title>

    <!-- Le styles -->
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">

    <body>
      <div class="container">

      <!-- Le content -->
      <div class="row">
        <div class="container-fluid">
          <div class="sidebar" style="border:1px solid #000">
            <img style="padding:5px 0px 0px 5px;" src="http://placehold.it/200x300" alt="">
          </div>
          <div class="content" style="border:1px solid #000">
            <ul class="tabs" data-tabs="tabs">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages</a></li>
              <li><a href="#">Settings</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            <div class="tab-content">
              <div class="active" id="home">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum tortor sapien. Vestibulum risus nunc, elementum id adipiscing eu, dictum eu ipsum. Aliquam ac ligula lacus. Mauris eleifend eleifend magna, ut tincidunt leo consequat quis.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我使用内联样式是因为我只是在测试。选项卡和内容之间有很大的空间。这是什么原因造成的以及如何解决？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

删除.tab-content 处的clear:both 声明，方法是在您的<link rel=..> 元素之后添加以下代码：

  <style>
    .tab-content {
      clear: none;
    }
  </style>

另外，不要忘记添加结束 </head> 标记。 小提琴：http://jsfiddle.net/gAJ2T/

【讨论】：

.content 是一个浮动元素。当clear:both 应用于.tab-content 时（=浮动元素之后），该元素将向下移动。另见：developer.mozilla.org/en/CSS/clear