2016-05-06 7 views
0

と完全に立ち往生:私はこのような何かしたいブートストラップメニュー

https://jsfiddle.net/clankill3r/34Lf1mke/

enter image description here

をしかし、タイトルとメニューは常にトップに固定してください。

私が何を試しても、1つのことが働くと別のものが壊れます。 - 幅/パディングが正しくない - Fooコンテンツのものが他のものの背後にある - 応答性が壊れます - のものが消えます -etc。 -affixは本当に変です。

これは再帰的問題のようです。

私もbootstap-4で試してみましたが、さらに悪化しました。

私の最新の試みは完全に壊れています。

通常、私はより具体的な質問をしますが、もうわかりません。 誰かが正しい方向に私を導くことができますか?

<div class="container"> 

    <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div> 
    <div class="clearfix"> 
    </div> 

    <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div> 

    <div class="content col-xs-12 col-md-6 col-lg-8"> 
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    </div> 

</div> 

編集、より詳細に行くために:それはこのようなものでなければなりませんモバイルで

:ここ

が出発点であるタイトルが (紫、青、メニュー、オレンジですコンテンツです)。 enter image description here

タイトルとメニューをスクロールしてスクロールしないでください。 これは少しスクロールした例です。大きな画面のために

enter image description here

それはこのようになります:

enter image description here

答えて

0

以下に書かれたコードを使用してください:スクロール

enter image description here

。私はこのコードはあなたのために完全に動作すると思います。コードがあなたのために働かない場合。以下のコメントで問題を言及してください。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Affix Vertical Side Menu</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <style> 
 
    body { 
 
     position: relative; 
 
     font-family: roboto; 
 
    } 
 
    .affix{ 
 
    \t top: 0px; 
 
    \t width: 23%; 
 
    } 
 
    p{ 
 
    font-size: 18px ! important; 
 
    } 
 

 
    #title1 {color: #000; background-color: orange; padding: 20px;} 
 
    #title2 {color: #000; background-color: orange; padding: 20px;} 
 
    #title3 {color: #000; background-color: orange; padding: 20px;} 
 
    #title {background-color: aqua;} 
 
#menu {background-color: aquamarine;} 
 
.content {background-color: orange;} 
 
.nav-stacked li a{ 
 
\t color: black ! important; 
 
} 
 
    </style> 
 
</head> 
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15"> 
 
<div class="container-fluid"><!--Content fluid starts--> 
 
    <div class="row"><!--Row starts--> 
 
    <nav class="col-lg-3" id="myScrollspy"><!--Column for (Vertical side menu Here >>>)--> 
 
<div class="panel panel-default" data-spy="affix" data-offset-top="70"> 
 

 
    <div class="panel-heading" id="title">THE TITLE</div><!--Your Title--> 
 
    <div class="panel-body" id="menu"> <!--Panel Body starts--> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     <li><a href="#title1">Title 1</a></li><!--Menu title1--> 
 
     <li><a href="#title2">Title 2</a></li><!--Menu title1--> 
 
     <li><a href="#title3">Title 3</a></li><!--Menu title1--> 
 
    </ul> 
 
    </div><!--Panel Body ends--> 
 
    </div> 
 
    
 
    </nav><!--Nav & Column ends--> 
 
    <div class="col-lg-9"><!--Column starts your content Here >>>--> 
 

 
     <div id="title1"><!--Title 1 content starts--> 
 
     <h1 class="text-center">Title 1</h1> 
 
     <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 

 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
     </div><!--Title 1 content ends--> 
 

 
     <div id="title2"> <!--Title 2 content starts--> 
 
     <h1 class="text-center">Title 2</h1> 
 
      <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
     </div><!--Title 2 content ends--> 
 

 
     <div id="title3"> <!--Title 3 content starts-->   
 
     <h1 class="text-center">Title 3</h1> 
 
      <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
     </div><!--Title 3 content ends--> 
 
      
 
     
 
    </div><!--Column content ends--> 
 
    </div><!--Row ends--> 
 
</div><!--Content fluid ends--> 
 

 
</body> 
 
</html>         \t \t

+0

ねえ、努力に感謝

ハッピー。本当に感謝しています。タイトルとメニューは常に一番上に固定する必要があります。だから彼らはページに沿ってスクロールする必要があります。タイトル欄の右側に何かがあってはいけません。 – clankill3r

+0

実際にはどういう意味ですか?あなたが実際に望むもののスクリーンショットを追加してください。あなたは質問がはっきりしない。タイトル部門の右側にあるべきものは何ですか?上記のコードはあなたのために働くかどうかです。コードがあなたのコードをupvote動作し、チェックボタンを入れて –

+0

私はいくつかのスクリーンショットを追加しました。 – clankill3r

0

編集---- これは、あなたが求めているコードです。このコードを使用すると、完全に機能します。コーディング:-)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Affix Vertical Side Menu</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <style> 
 
    body { 
 
     position: relative; 
 
     font-family: roboto; 
 
    } 
 
    .affix{ 
 
    \t top: 70px; 
 
    \t width: 23%; 
 
    } 
 
    p{ 
 
    font-size: 18px ! important; 
 
    } 
 

 
    #title1 {color: #000; background-color: orange; padding: 20px;} 
 
    #title2 {color: #000; background-color: orange; padding: 20px;} 
 
    #title3 {color: #000; background-color: orange; padding: 20px;} 
 
    #title {background-color: aqua;} 
 
#menu {background-color: aquamarine;} 
 
.content {background-color: orange;} 
 
.navbar-default{ 
 
\t background-color: purple ! important; 
 
} 
 
.nav-stacked li a{ 
 
\t color: black ! important; 
 
} 
 
.navbar-brand{ 
 
\t color: white ! important; 
 
} 
 
.navbar-nav li a{ 
 
\t color: white ! important; 
 
} 
 
/* Landscape phones and portrait tablets */ 
 
@media (max-width: 767px) { 
 
body{ 
 
\t padding-top: 70px; 
 
} 
 
.affix{ 
 
    \t top: 50px; 
 
    \t width: 100%; 
 
    \t z-index: 100; 
 
    } 
 
} 
 
/* Large desktops and laptops */ 
 
@media (min-width: 1200px) { 
 
body{ 
 
\t padding-top: 70px; 
 
} 
 
.affix{ 
 
    \t top: 70px; 
 
    \t width: 23%; 
 
    } 
 
} 
 
    </style> 
 
</head> 
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15"> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <a class="navbar-brand" href="#">Title Logo</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 

 
<div class="container-fluid"><!--Content fluid starts--> 
 
    <div class="row"><!--Row starts--> 
 
    <nav class="col-lg-3" id="myScrollspy"><!--Column for (Vertical side menu Here >>>)--> 
 
<div class="panel panel-default" data-spy="affix" data-offset-top="100"> 
 

 
    <div class="panel-heading" id="title">THE TITLE</div><!--Your Title--> 
 
    <div class="panel-body" id="menu"> <!--Panel Body starts--> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     <li><a href="#title1">Title 1</a></li><!--Menu title1--> 
 
     <li><a href="#title2">Title 2</a></li><!--Menu title1--> 
 
     <li><a href="#title3">Title 3</a></li><!--Menu title1--> 
 
    </ul> 
 
    </div><!--Panel Body ends--> 
 
    </div> 
 
    
 
    </nav><!--Nav & Column ends--> 
 
    <div class="col-lg-9"><!--Column starts your content Here >>>--> 
 

 
     <div id="title1"><!--Title 1 content starts--> 
 
     <h1 class="text-center">Title 1</h1> 
 
     <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 

 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
     </div><!--Title 1 content ends--> 
 

 
     <div id="title2"> <!--Title 2 content starts--> 
 
     <h1 class="text-center">Title 2</h1> 
 
      <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
     </div><!--Title 2 content ends--> 
 

 
     <div id="title3"> <!--Title 3 content starts-->   
 
     <h1 class="text-center">Title 3</h1> 
 
      <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
\t \t <p> Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
    \t \t Foo Foo Foo Foo 
 
    \t \t \t Bar Bar Bar Bar 
 
    \t \t Ham Ham Ham Ham 
 
    \t \t Jam Jam Jam Jam 
 
\t \t </p> 
 
     </div><!--Title 3 content ends--> 
 
      
 
     
 
    </div><!--Column content ends--> 
 
    </div><!--Row ends--> 
 
</div><!--Content fluid ends--> 
 

 
</body> 
 
</html>         \t \t

関連する問題