Question

我尝试使用导航栏排列社交媒体图标，但将它们放在显示屏的右侧。有人可以帮忙吗？

第一张图片就是现在的样子，第二张是我想要的样子 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;">&copy; 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/

感谢您抽出宝贵时间，度过美好的一天

Answer 1

尝试使用这些css属性应用于您的社交图标

  ul.navbar-nav{
float:right;
}

ul.navbar-nav li{
    display: inline;
    list-style-type: none;
}

如果仍然面临问题，请为您的问题提供一个jsfiddle链接

如何在导航栏的右侧放置社交媒体图标

1 个答案: