2016-05-06 16 views
0

Ich möchte etwas wie folgt aus:total stecken mit Bootstrap-Menü

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

enter image description here

Aber der Titel und Menü immer an der Spitze befestigt werden soll.

Aber egal was ich versuche, wenn eine Sache funktioniert, bricht andere Dinge. Entweder: -die Breite/padding gets falsche -der Foo Inhalt, was sich hinter anderem -die Reaktions bricht -things -etc verschwinden. usw. -affix verhält sich wirklich seltsam.

Es ist wie ein rekursives Problem.

Ich habe es auch mit bootstap-4 versucht, aber das machte es noch schlimmer.

Mein letzter Versuch ist völlig pleite.

Normalerweise würde ich eine genauere Frage stellen, aber ich sehe nicht mehr klar. Kann mich jemand in die richtige Richtung führen?

Hier ist ein Ausgangspunkt:

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

bearbeiten, im Detail zu gehen:

Auf einem mobilen es so etwas wie dies sein sollte: (lila Titel ist, ist blau-Menü, orange ist zufrieden). enter image description here

Beim Scrollen sollten Titel und Menü nicht gescrollt werden. Dies ist ein Beispiel für das Scrollen ein wenig.

enter image description here

Für einen größeren Bildschirm es so sein würde:

enter image description here

gescrollt:

enter image description here

Antwort

0

Verwenden Sie den Code unten geschrieben. Ich denke, dieser Code wird perfekt für Sie arbeiten. Wenn der Code nicht für Sie funktioniert. Erwähnen Sie das Problem im folgenden Kommentar.

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

Hey, danke für die Mühe. Wirklich zu schätzen es. Der Titel und das Menü sollten immer oben fixiert sein. Also sollten sie entlang der Seite scrollen. Und es sollte nie etwas auf der rechten Seite des Titeldivs sein. – clankill3r

+0

Was du eigentlich meinst. Fügen Sie einen beliebigen Screenshot hinzu, was Sie tatsächlich möchten. Deine Frage ist nicht klar. Was ist das, was auf der rechten Seite des Titeldivs sein sollte? Der obige Code funktioniert für Sie oder nicht. Wenn der Code funktioniert, upvote ich meinen Code und setze den Tick Button –

+0

Ich habe ein paar Screenshots hinzugefügt. – clankill3r

0

bearbeiten ---- Dies ist der Code, den Sie haben wollen. Verwenden Sie diesen Code, es wird perfekt für Sie arbeiten.

Glücklich Coding :-)

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