将表单放置在 <ul> 元素旁边
Position a form next to a <ul> element
我正在使用 Twitter bootstrap 创建导航栏，我在其中实现了一些服装 CSS：
<nav id="Navbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.linkedin.com/in/johntk86" >John Kiernan</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" id="Navmenu">
<li id="active"><a href="index.html" >Home</a></li>
<li><a href="apps.html" >Apps</a></li>
<li><a href="qualifications.html" >Qualifications</a></li>
<li ><a data-toggle="modal" data-target="#myModal">Contact</a></li>
</ul>
<form id="search" action="#" method="post">
<div id="label"><i class="fa fa-search" for="search-terms" id="search-label"></i></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>
<nav>
<div id="social-buttons">
<ul class="social list-inline">
<li><a href="http://whosebug.com/"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a></li>
<li><a href="#">
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</nav>
我在我的社交媒体按钮之前实现了一个表单，我试图让该表单在我的导航栏中排在 <div id="social-buttons"> 旁边并使其响应。
我修改了找到的示例 here 以适合我的代码。
这可以实现吗？我已经试了好几个小时了。
JS:
(function(window){
// get vars
var searchEl = document.querySelector("#input");
var labelEl = document.querySelector("#label");
// register clicks and toggle classes
labelEl.addEventListener("click",function(){
console.log("Im in here");
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
} else {
classie.add(searchEl,"focus");
classie.add(labelEl,"active");
}
});
// register clicks outisde search box, and toggle correct classes
document.addEventListener("click",function(e){
var clickedID = e.target.id;
if (clickedID != "search-terms" && clickedID != "search-label") {
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
}
}
});
}(window));
CSS:
#search {
position: absolute;
color: #888888;
left: 20px;
font-size: 20px;
padding-top: 15px;
}
#label {
width: 60px;
height: 100px;
position: absolute;
z-index: 60;
}
#input {
position: relative;
top: 20;
left: 60px;
width: 200px;
height: 40px;
z-index: 5;
overflow: hidden;
}
#input input {
position: relative;
top: 0;
left: -450px;
width: 450px;
height: 100%;
margin: 0;
margin: 20;
padding: 0 10px;
border: none;
background-color: #eee;
color: #000000;
font-size: 18px;
backface-visibility: none;
border-radius: 0;
transition: left 0;
}
#input input:focus {
outline: none
}
#input.focus {
z-index: 20
}
#input.focus input {
left: 0;
transition: left 0.3s;
}
是的，这是可能的，有很多方法可以解决这个问题，但我会这样做：
HTML:
<nav id="Navbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.linkedin.com/in/johntk86" >John Kiernan</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" id="Navmenu">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="apps.html" >Apps</a></li>
<li><a href="qualifications.html" >Qualifications</a></li>
<li><a data-toggle="modal" data-target="#myModal">Contact</a></li>
</ul>
<div class="form-container">
<form id="search" action="#" method="post">
<div id="label"><i class="fa fa-search" for="search-terms" id="search-label"></i></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>
<div id="social-buttons">
<ul class="social list-inline">
<li><a href="http://whosebug.com/"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS:
form, form > div {
display:inline-block;
}
.form-container {
display:table;
height:50px;
float:right;
}
.form-container > form, .form-container > div {
display:table-cell;
vertical-align:middle;
}
#social-buttons ul {
margin:0;
}
我删除了社交按钮周围的 nav 环绕，因为它是不必要的，并且 Bootstrap 为导航元素提供了 100% 的宽度，在这种情况下你不想要它，因为你想要按钮与其他元素内联。此外，我将 form 和 social-buttons div 包装在一个容器中，可以将其视为 table 来处理垂直居中并向右浮动.
Bootply Example
看起来你正在尝试做这样的事情，这意味着将你的表单放在 navbar-header div 中，然后从那里开始定位表单和输入，这样它覆盖你的链接。
希望这对您有所帮助。
$(".btn-search").click(function(e) {
$("#search-input, #btn-go").fadeToggle();
});
body {
padding-top: 60px;
}
.navbar.navbar-custom {
border: none;
}
.navbar.navbar-custom .navbar-toggle {
z-index: 1;
border: none;
background: none;
padding: 7.5px 5px 0 0;
}
.navbar.navbar-custom .formSearch {
left: 0;
position: absolute;
}
.btn.btn-search,
.btn.btn-search:hover,
.btn.btn-search:focus {
background: none;
height: 50px;
box-shadow: none;
outline: none;
border-radius: 0;
border: none;
color: #fff;
}
.navbar.navbar-custom #search-input {
height: 50px;
background: #444;
color: #fff;
box-shadow: none;
outline: none;
font-size: 20px;
border: none;
display: none;
}
.navbar.navbar-custom #search-input:focus {
height: 50px;
background: #444;
color: #f00;
box-shadow: none;
outline: none;
font-size: 20px;
border: none;
bottom: 0;
display: none;
}
.navbar.navbar-custom .input-group-btn #btn-go {
height: 50px;
border-radius: 0;
border: none;
box-shadow: none;
outline: none;
background: rgba(17, 18, 19, 1) color: #fff;
display: none;
}
.navbar.navbar-custom .navbar-toggle i {
color: #fff;
}
@media (min-width: 768px) {
.navbar.navbar-custom .nav.navbar-left {
margin-left: 25px;
}
}
@media (max-width: 767px) {
.navbar.navbar-custom #social-nav > li {
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<i class="fa fa-align-right"></i>
</button>
<form class="formSearch" role="search"> <span class="input-group"> <span class="input-group-btn">
<button class="btn btn-default btn-search" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
<input type="text" class="form-control hasclear" id="search-input" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" id="btn-go" type="button"> Search</button>
</span>
</span>
</form>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li id="active"><a href="index.html">Home</a>
</li>
<li><a href="apps.html">Apps</a>
</li>
<li><a href="qualifications.html">Qualifications</a>
</li>
<li><a data-toggle="modal" data-target="#myModal">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" id="social-nav">
<li><a href="http://whosebug.com/"><i class="fa fa-stack-overflow"></i></a>
</li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a>
</li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="well well-lg">
<h1>Boostrap Search Bar</h1>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</p>
</div>
我正在使用 Twitter bootstrap 创建导航栏，我在其中实现了一些服装 CSS：
<nav id="Navbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.linkedin.com/in/johntk86" >John Kiernan</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" id="Navmenu">
<li id="active"><a href="index.html" >Home</a></li>
<li><a href="apps.html" >Apps</a></li>
<li><a href="qualifications.html" >Qualifications</a></li>
<li ><a data-toggle="modal" data-target="#myModal">Contact</a></li>
</ul>
<form id="search" action="#" method="post">
<div id="label"><i class="fa fa-search" for="search-terms" id="search-label"></i></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>
<nav>
<div id="social-buttons">
<ul class="social list-inline">
<li><a href="http://whosebug.com/"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a></li>
<li><a href="#">
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</nav>
我在我的社交媒体按钮之前实现了一个表单，我试图让该表单在我的导航栏中排在 <div id="social-buttons"> 旁边并使其响应。
我修改了找到的示例 here 以适合我的代码。
这可以实现吗？我已经试了好几个小时了。
JS:
(function(window){
// get vars
var searchEl = document.querySelector("#input");
var labelEl = document.querySelector("#label");
// register clicks and toggle classes
labelEl.addEventListener("click",function(){
console.log("Im in here");
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
} else {
classie.add(searchEl,"focus");
classie.add(labelEl,"active");
}
});
// register clicks outisde search box, and toggle correct classes
document.addEventListener("click",function(e){
var clickedID = e.target.id;
if (clickedID != "search-terms" && clickedID != "search-label") {
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
}
}
});
}(window));
CSS:
#search {
position: absolute;
color: #888888;
left: 20px;
font-size: 20px;
padding-top: 15px;
}
#label {
width: 60px;
height: 100px;
position: absolute;
z-index: 60;
}
#input {
position: relative;
top: 20;
left: 60px;
width: 200px;
height: 40px;
z-index: 5;
overflow: hidden;
}
#input input {
position: relative;
top: 0;
left: -450px;
width: 450px;
height: 100%;
margin: 0;
margin: 20;
padding: 0 10px;
border: none;
background-color: #eee;
color: #000000;
font-size: 18px;
backface-visibility: none;
border-radius: 0;
transition: left 0;
}
#input input:focus {
outline: none
}
#input.focus {
z-index: 20
}
#input.focus input {
left: 0;
transition: left 0.3s;
}
是的，这是可能的，有很多方法可以解决这个问题，但我会这样做：
HTML:
<nav id="Navbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.linkedin.com/in/johntk86" >John Kiernan</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" id="Navmenu">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="apps.html" >Apps</a></li>
<li><a href="qualifications.html" >Qualifications</a></li>
<li><a data-toggle="modal" data-target="#myModal">Contact</a></li>
</ul>
<div class="form-container">
<form id="search" action="#" method="post">
<div id="label"><i class="fa fa-search" for="search-terms" id="search-label"></i></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>
<div id="social-buttons">
<ul class="social list-inline">
<li><a href="http://whosebug.com/"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS:
form, form > div {
display:inline-block;
}
.form-container {
display:table;
height:50px;
float:right;
}
.form-container > form, .form-container > div {
display:table-cell;
vertical-align:middle;
}
#social-buttons ul {
margin:0;
}
我删除了社交按钮周围的 nav 环绕，因为它是不必要的，并且 Bootstrap 为导航元素提供了 100% 的宽度，在这种情况下你不想要它，因为你想要按钮与其他元素内联。此外，我将 form 和 social-buttons div 包装在一个容器中，可以将其视为 table 来处理垂直居中并向右浮动.
Bootply Example
看起来你正在尝试做这样的事情，这意味着将你的表单放在 navbar-header div 中，然后从那里开始定位表单和输入，这样它覆盖你的链接。
希望这对您有所帮助。
$(".btn-search").click(function(e) {
$("#search-input, #btn-go").fadeToggle();
});
body {
padding-top: 60px;
}
.navbar.navbar-custom {
border: none;
}
.navbar.navbar-custom .navbar-toggle {
z-index: 1;
border: none;
background: none;
padding: 7.5px 5px 0 0;
}
.navbar.navbar-custom .formSearch {
left: 0;
position: absolute;
}
.btn.btn-search,
.btn.btn-search:hover,
.btn.btn-search:focus {
background: none;
height: 50px;
box-shadow: none;
outline: none;
border-radius: 0;
border: none;
color: #fff;
}
.navbar.navbar-custom #search-input {
height: 50px;
background: #444;
color: #fff;
box-shadow: none;
outline: none;
font-size: 20px;
border: none;
display: none;
}
.navbar.navbar-custom #search-input:focus {
height: 50px;
background: #444;
color: #f00;
box-shadow: none;
outline: none;
font-size: 20px;
border: none;
bottom: 0;
display: none;
}
.navbar.navbar-custom .input-group-btn #btn-go {
height: 50px;
border-radius: 0;
border: none;
box-shadow: none;
outline: none;
background: rgba(17, 18, 19, 1) color: #fff;
display: none;
}
.navbar.navbar-custom .navbar-toggle i {
color: #fff;
}
@media (min-width: 768px) {
.navbar.navbar-custom .nav.navbar-left {
margin-left: 25px;
}
}
@media (max-width: 767px) {
.navbar.navbar-custom #social-nav > li {
display: inline-block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<i class="fa fa-align-right"></i>
</button>
<form class="formSearch" role="search"> <span class="input-group"> <span class="input-group-btn">
<button class="btn btn-default btn-search" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
<input type="text" class="form-control hasclear" id="search-input" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" id="btn-go" type="button"> Search</button>
</span>
</span>
</form>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li id="active"><a href="index.html">Home</a>
</li>
<li><a href="apps.html">Apps</a>
</li>
<li><a href="qualifications.html">Qualifications</a>
</li>
<li><a data-toggle="modal" data-target="#myModal">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" id="social-nav">
<li><a href="http://whosebug.com/"><i class="fa fa-stack-overflow"></i></a>
</li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a>
</li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="well well-lg">
<h1>Boostrap Search Bar</h1>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</p>
</div>