3

次のコードがあります。

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

テストのみを行っているため、インライン スタイルを使用しました。タブとコンテンツの間に大きなスペースがあります。これの原因と修正方法は？

4

1 に答える 1

1

要素の後に次のコードを追加して、のclear:both宣言を削除します。.tab-content<link rel=..>

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

</head>また、終了タグを追加することを忘れないでください。フィドル: http://jsfiddle.net/gAJ2T/

于 2011-10-25T19:14:51.317 に答える