我尝试使用导航栏排列社交媒体图标,但将它们放在显示屏的右侧。有人可以帮忙吗?
第一张图片就是现在的样子,第二张是我想要的样子 http://imgur.com/a/e0vJQ
当它崩溃时,它看起来像这样:http://imgur.com/AXgjgUH 所以我想知道,因为我试图改变图标的位置,当它崩溃时它将如何影响定位,因为我试图让一切都整洁有序。有人能告诉我解决这个问题的最佳解决方案吗?我正在努力寻找解决方案,所以如果有人可以提供帮助,那就太棒了
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="work.html" style="color:#000000; margin- left:1.5em;">Work</a></li>
<li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
<li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>
<i class="fa fa-facebook-square" style="color:#3b5197; margin-left:1.5em;"></i>
<i class="fa fa-instagram" style="color:#7f5144; margin-left:.8em;"></i>
<i class="fa fa-twitter-square" style="color:#00c7f4; margin-left:.8em;"></i>
</ul>
</div>
</div>
</nav>
<div>
</div>
<div class="somethingsimple">
</p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>
<footer class="footer">
<div class="container" style="display: table; height: 50px; overflow: hidden;">
<p class="text-muted" style="display: table-cell; vertical-align: middle;">© 2013-2015 Paulo Pinzon-Iradian, All Rights Reserved</p>
</div>
</footer>
</body>
</html>
CSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@font-face
{
font-family:OpenSans-Regular;
src:url(fonts/OpenSans-Regular.ttf);
}
.navbar-default{
background: #fff;
margin-top:2%;
border:0px;
}
.navbar-brand
{
font-family: 'Open Sans', sans-serif;
font-size: 22px;
}
ul, li, a
{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 22px;
color: #000000;
font-weight: 100;
letter-spacing:-1px;
}
.navbar-toggle
{
border:0px;
}
.container .jumbotron.no-padding
{
background: #fff;
border:0px;
font-family: font-family: 'Open Sans', sans-serif;
font-size: 22px;
text-decoration: none;
padding-left: 0;
padding-right: 0;
color:#000000;
}
.footer {
position: absolute;
width:100%;
bottom:0;
left:0;
right:0;
text-align:right;
}
.footer .container {
width: 100%;
}
.right.carousel-control, .left.carousel-control {
opacity: 0;
filter:alpha(opacity=0); /* IE support */
width:50%;
height:100%;
}
img
{
margin:auto;
}
figcaption
{
display:block;
text-align:center;
margin-left:auto;
margin-right: auto;
}
.somethingsimple
{
position: absolute;
width:100%;
top: 50%;
text-align: center;
margin-left: auto;
margin-right: auto;
font-family: font-family: 'Open Sans', sans-serif;
font-size: 22px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
i
{
float:right;
}
ul.navbar-nav li{
display: inline;
list-style-type: none;
}
自首次发布问题以来,这是一个有一些变化的jsfiddle: https://jsfiddle.net/er78k2on/
感谢您抽出宝贵时间,度过美好的一天
答案 0 :(得分:2)
尝试使用这些css属性应用于您的社交图标
ul.navbar-nav{
float:right;
}
ul.navbar-nav li{
display: inline;
list-style-type: none;
}
如果仍然面临问题,请为您的问题提供一个jsfiddle链接