顶部栏带有徽标和社交分享按钮的区域，其中包含引导程序中的搜索栏
您好任何人都可以帮我修改代码，将标识，社交分享按钮与搜索栏对齐在引导程序顶栏中的同一行，如下图所示Sample image 以及带引导程序的相应菜单导航栏。 我的代码附在下面，我能够获得所需的结构，但无法对其应用适当的CSS。
<div class="top-bar">
<div class="col-sm-4">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
</div><!-- logo-end -->
</div>
</div>
<!---Social Icons-->
<div class="col-sm-8 " align="right">
<div class="social">
<ul class="social-share">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<!---Search Screen-->
<div class="search">
<form role="form">
<div class="searchtop">
<input type="text" class="search-form" autocomplete="off" placeholder="Type your search here...">
<i class="fa fa-search"></i>
</div>
</form>
</div>
</div>
谢谢。
2 个答案:
答案 0 :(得分：0)
请使用以下代码：
<div class="col-sm-8 " align="right">
<div class="social">
<span><a href="#">facebook</a></span>
<span><a href="#">twitter</a></span>
<span><a href="#">linkedin</a></span>
<span><a href="#">pinterest</a></span>
<span><a href="#">instagram</a></span>
<!---Search Screen-->
<span>
<input type="text" class="search-form" autocomplete="off" placeholder="Type your search here...">
<i class="fa fa-search"></i>
</span>
</div>
答案 1 :(得分：0)
如您的示例图片所示，您希望在社交媒体图标，搜索和＆amp;导航栏在右侧。社交媒体图标位于顶行。
这样做的方法很少。我基本上使用了这种方法：
<div class="row">
<div class="col-md-3">Logo</div>
<div class="col-md-9">
<div class="col-md-12">Social-Icons & Search-Bar</div>
<div class="col-md-12">Nav-Bar</div>
</div>
</div>
下面的代码段不会显示宽度限制的准确结果。但HTML结构是正确的。有关结果，请参阅此codepen
html,body
{
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
body {
background: #fff;
font-family: 'open_sansregular', sans-serif;
color:#4e4e4e;
line-height: 22px;
}
/* Background image for header */
.header-bg {
margin-top: -5px;
background-image:url("../images/banner.png");
}
/* Top region begins */
.social-share {
display: inline-block;
list-style: none;
padding: 0px 15px;
margin-right:2px;
}
ul.social-share li {
display: inline-block;
}
.social {
text-align: right;
margin-top:30px;
}
ul.social-share li a {
display: inline-block;
color: #fff;
background: #808080;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 14px;
}
ul.social-share li a:hover {
background:#1C83C6;
}
.input-group{
margin-top:30px;
margin-right:-40px;
}
.input-group-addon{
color:#1C83C6;
}
/* Top region Ends */
/* Menu region Begins */
.navbar-custom {
margin-top:8px;
background-color:none;
}
.nav.navbar-nav li .color{
color: red;
}
.nav.navbar-nav li a:hover {
background-color : #F36C35;
color: blue;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
} <html>
<head>
<meta charset="UTF-8">
<title>A Pen by Ahmad</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<div class="header-bg">
<header>
<div class="container">
<!--Header-->
<div class="row">
<div class="col-md-3 navbar-brand">
<a href="index.html"><img src="http://rndimg.com/ImageStore/OilPaintingGreenReal/200x200_OilPaintingGreenReal_55ddf783e44e4c54b5cec77bc164c1ad.jpg" alt="logo"></a>
</div>
<!---Social Icons-->
<div class="col-md-9 socialMedia-navBar">
<div class="socialMedia-serachbar">
<div class="col-md-6 social visible-lg visible-md">
<ul class="social-share">
<li><a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
<li><a href="https://instagram.com"><i class="fa fa-instagram"></i></a></li></ul>
</div>
<!--Search Bar-->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type your search here" />
<span class="input-group-addon ">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</div>
<!--Navigation Bar-->
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar" aria-expanded="true">
<ul class="nav navbar-nav ">
<li class="dropdown"><a class="dropdown-toggle color" data-toggle="dropdown" href="#">RESUME <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level 1</a></li>
<li><a href="#">Second level 2</a></li>
<li><a href="#">Second level 3</a></li>
</ul>
</li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle color" data-toggle="dropdown" href="#">CAREER EXPLORATION<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level 1</a></li>
<li><a href="#">Second level 2</a></li>
<li><a href="#">Second level 3</a></li>
</ul>
</li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
<li><a class="color" href="#">INTERVIEWS</a></li>
<li class="dropdown"><a class="dropdown-toggle color" data-toggle="dropdown" href="#">COVER LETTERS<span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level 1</a></li>
<li><a href="#">Second level 2</a></li>
<li><a href="#">Second level 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="color" href="#">MEET THE TEAM</a></li>
<li><a class="color" href="#">CONTINUING EDUCATION</a></li>
<li><a class="color" href="#">EMPLOYERS</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？