个人中心
gpt4 book ai didi

jquery - 导航栏折叠时如何更改图标的位置？

转载 作者：行者123 更新时间：2023-11-28 07:11:10 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 中的模板。我想弄清楚，当导航栏折叠时，您按下图标栏按钮，菜单项列表会下拉，在我的例子中是工作、关于、联系。但我也有一些社交媒体图标，我试图将它们放在右上角而不是右下角。

我上传了图片以防它更有用。这是网站的布局。 http://imgur.com/87sxit5

但是当显示最小化并且菜单折叠时，它看起来像这样http://imgur.com/5lv5Mpi

但我想做的是让它看起来像这样 http://imgur.com/1Cj9lro

我已经尝试了几个想法，我很接近，但还不够。我不是很有经验，所以我似乎无法弄清楚我遗漏了什么或做错了什么。如果有人可以帮助指出我哪里出错了，将不胜感激。感谢您抽出时间。

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">
        <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>

        <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>                
            </ul>
            <div>
                <i><a target="_blank" href="https://twitter.com/PauloPinzonArt" class="fa fa-twitter-square" style="color:#00c7f4; margin-left:.9em; font-size: 1.9em;"></a></i>
                <i><a target="_blank" href="https://instagram.com/paulopinzonart/" class="fa fa-instagram" style="color:#125688; margin-left:.9em; font-size: 1.9em;"></a></i>
                <i><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" class="fa fa-facebook-square" style="color:#3b5197; margin-left:.9em; font-size: 1.9em;"></a></i>
            </div>

        </div>

    </div>
</nav>

</body>
</html>

CSS:

.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;
}

i
{
float:right;
margin-top: 13px;
}

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

@media only screen and (max-width: 750px) {
    ul,li,a, role{
        width:50%;
    }
}

最佳答案

这可能会对您有所帮助或给您一些想法:我将您的图标放入 navbar-right 类中，并将它们的位置调整到 767px 以下。

.navbar.navbar-default {
  background: #fff;
  border: 0px;
}
.navbar .navbar-brand {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
}
.navbar ul,
.navbar li,
.navbar a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #000000;
  font-weight: 100;
  letter-spacing: -1px;
}
.navbar .navbar-toggle {
  border: 0px;
}
@media (max-width: 767px) {
  .navbar-nav.navbar-right {
    top: -125px;
    right: 25px;
    float: right;
    position: relative;
  }
  .navbar-nav.navbar-right > li {
    display: table-cell;
  }
}
<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 role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container">
    <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>
    <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>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>

        </li>
        <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>

        </li>
        <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="alert alert-info">Soomething</div>
</div>

关于jquery - 导航栏折叠时如何更改图标的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32638538/

25 4 0
文章推荐： css - 根据索引查询scss映射到位置div
文章推荐： html - 如何将样式应用于嵌入式 SVG？
文章推荐： html - 背景图片背后的谷歌翻译下拉菜单
文章推荐： ios - sqlite3_prepare_v2 返回 1
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com