我正在使用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">旁边，并让它响应。
我修改了找到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;
}
答案 0 :(得分：2)
是的，这是可能的，有很多方法可以接近它，但我会做这样的事情：
<强> HTML：
li {
list-style-type: none;
display:inline;
text-transform: uppercase;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 1px;
font-size: 21px;
}
ul {
text-align:center;
}
.topmenu {
list-style-type: none;
padding: 10px;
cursor: pointer;
}
.submenu {
display: none;
width: 150px;
text-align: center;
}
<强> 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 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>
我从社交按钮周围移除了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;
}
换行，因为它是不必要的，Bootstrap为导航元素提供了100％的宽度，在这种情况下您不希望这样，因为您希望按钮与内联其他要素。另外，我已将nav和form div包装在一个容器中，该容器可被视为一个表来处理垂直居中，也浮动到右侧。
答案 1 :(得分：1)
看起来你正在尝试做类似这样的事情，这意味着将你的表单放在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://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>