我正在使用Twitter引导程序创建一个导航栏，我在其中实现了一些服装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://stackoverflow.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">旁边排列，并让它做出响应。
我修改了这里的示例以适应我的代码。
这是可以实现的吗？几个小时以来我一直在徒劳地尝试。
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://stackoverflow.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-buttonsdiv封装在一个容器中，该容器可以被视为一个表来处理垂直居中，也可以向右浮动。
Bootply示例
看起来你正在尝试这样做，这意味着将你的表单放在导航栏标题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://stackoverflow.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>