如何在 bootstrap4 导航栏中对齐社交媒体图标及其工具提示？

【问题标题】：How to align social media icons and their tooltip in a bootstrap4 navbar?如何在 bootstrap4 导航栏中对齐社交媒体图标及其工具提示？
【发布时间】：2020-08-10 21:47:42
【问题描述】：

我无法将社交图标及其工具提示与导航栏的其余部分对齐。 如果您看到：社交图标不在正方形的中心，并且它们的工具提示不在黄色框下方。 （此代码中没有，但在图像和名称下，工具提示集中并完美地位于黄色框下方）。 还有，我怎样才能拉开它们的距离？

抱歉我的代码不好，但我是 HTML 和 CSS 的新手。

我使用 bootsrap4 作为导航栏黄色框，使用 font-awesome 作为社交图标。

我删除了一些关于徽标和标题的部分。 

.container {
    display: flex; /* mi permette di allineare tutti gli elementi*/
    margin: 15;
    padding: 20;
}
.social {
    position: relative;
    display: inline-block;
  }

/*Allineo elementi lista*/
.social ul{
    display: flex;
}

/*Rimuove i punti*/
.social ul li{
    list-style: none; 
    display: inline-block;
}


/*Il tooltip è il testo che appare quando posizione il mouse su una determinata zona*/
span.tooltiptext{
    /*Aspetto del testo*/
    visibility: hidden;
    width: 120px;
    background-color:#803c25;
    color:#fff;
    text-align: center;
    border-radius: 6px;
  

    /*Posizione del fumetto*/
    position: absolute;
    z-index: 1;
    top: 100%;
    margin-left: -79px;
    
    /*Effetto sfocatura*/
    opacity: 0;
    transition: 0.3s;
}

/* Posizione puntatore del tooltip */
span.tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color:transparent transparent #803c25 transparent;
  }

.social ul li:hover span.tooltiptext{
    visibility: visible;
    opacity: 1;
}

/*Loghi Social*/

.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
  }
  

.fa-facebook {
  background: #3B5998;
  color: white;
  text-decoration: none
}

.fa-tripadvisor {
    background: #00af87;
    color: white;
    text-decoration: none
  }
<!-- Script di Bootstrap per realizzare lo sfondo della navbar-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    

    <!-- Navbar-->
    <link href="nav.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
        <header>
            <nav class="navbar navbar-expand-sm bg-warning navbar-dark">
                <div class="container">

                <div class="logo">
                        <a href="gestione.html">
                            <img src="./Immagini/logo.PNG">
                            <span class="tooltiptext"> Login Admin</span>
                        </a>
                </div>

                <div class="nome">
                    <a href="index.html">Il Brigante</a>
                    <span class="tooltiptext">Home</span>
                </div>

                <div class="social">
                    
                    <ul>
                        <li>
                            <a class="fa fa-facebook" target="_blank"></a>

                            <span class="tooltiptext"> Seguici su facebook</span>
                        </li>

                        <li>
                            <a class="fa fa-tripadvisor"target="_blank">
                                </a>

                            <span class="tooltiptext"> Guarda le nostre recensioni</span>
                        </li>

                    </ul>
                </div>
            </div>
            </nav>
        </header>
    </body>

【问题讨论】：

    标签： html css bootstrap-4 font-awesome


    【解决方案1】：

    您需要在“a”标签中添加下面的css。

        .container {
        display: flex; /* mi permette di allineare tutti gli elementi*/
        margin: 15;
        padding: 20;
    }
    .social {
        position: relative;
        display: inline-block;
      }

    /*Allineo elementi lista*/
    .social ul{
        display: flex;
    }

    /*Rimuove i punti*/
.social ul li{
list-style: none; 
display: inline-block;
list-style-type: none;
}
.social ul li a{
display: flex;
align-items: center;
justify-content: center;
}

    /*Il tooltip è il testo che appare quando posizione il mouse su una determinata zona*/
    span.tooltiptext{
        /*Aspetto del testo*/
        visibility: hidden;
        width: 120px;
        background-color:#803c25;
        color:#fff;
        text-align: center;
        border-radius: 6px;
      

        /*Posizione del fumetto*/
        position: absolute;
        z-index: 1;
        top: 100%;
        margin-left: -79px;
        
        /*Effetto sfocatura*/
        opacity: 0;
        transition: 0.3s;
    }

/* Posizione puntatore del tooltip */
span.tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color:transparent transparent #803c25 transparent;
  }

.social ul li:hover span.tooltiptext{
    visibility: visible;
    opacity: 1;
}

/*Loghi Social*/

.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
  }
  

.fa-facebook {
  background: #3B5998;
  color: white;
  text-decoration: none
}

.fa-tripadvisor {
    background: #00af87;
    color: white;
    text-decoration: none
  }
    <!-- Script di Bootstrap per realizzare lo sfondo della navbar-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    

    <!-- Navbar-->
    <link href="nav.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
        <header>
            <nav class="navbar navbar-expand-sm bg-warning navbar-dark">
                <div class="container">

                <div class="logo">
                        <a href="gestione.html">
                            <img src="./Immagini/logo.PNG">
                            <span class="tooltiptext"> Login Admin</span>
                        </a>
                </div>

                <div class="nome">
                    <a href="index.html">Il Brigante</a>
                    <span class="tooltiptext">Home</span>
                </div>

                <div class="social">
                    
                    <ul>
                        <li>
                            <a class="fa fa-facebook" target="_blank"></a>

                            <span class="tooltiptext"> Seguici su facebook</span>
                        </li>

                        <li>
                            <a class="fa fa-tripadvisor"target="_blank">
                                </a>

                            <span class="tooltiptext"> Guarda le nostre recensioni</span>
                        </li>

                    </ul>
                </div>
            </div>
            </nav>
        </header>
    </body>

    【讨论】：

    • 请指定您需要添加的 CSS 并添加一些解释，以便 OP 知道答案中的更改以及我的代码中需要更改的内容
    【解决方案2】：

    您的代码不稳定，请改进您的代码。

    您可以覆盖Bootstrap CSS，但不能通过在bootstrap classes 中添加该CSS。记住它。

    回到您的代码，我在您的代码中修改并添加了一些 CSS。

    我从您的工具提示中删除了margin-left: -79px;，因为它会在将来造成问题。

    我在您的.social ul li 中添加了position: relative 并将left: 50%; transform: translateX(-50%); 添加到您的工具提示类中，以使您的工具提示在每个块中居中。

    我在您的 icons 中添加了 d-flex justify-content-center 类，用于在块中居中图标。

    .container {
  display: flex;
  /* mi permette di allineare tutti gli elementi*/
  margin: 15;
  padding: 20;
}

.social {
  position: relative;
  display: inline-block;
}


/*Allineo elementi lista*/

.social ul {
  display: flex;
}


/*Rimuove i punti*/

.social ul li {
  list-style: none;
  display: inline-block;
  position: relative;
}


/*Il tooltip è il testo che appare quando posizione il mouse su una determinata zona*/

span.tooltiptext {
  /*Aspetto del testo*/
  visibility: hidden;
  width: 120px;
  background-color: #803c25;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  /*Posizione del fumetto*/
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* margin-left: -79px; */
  /*Effetto sfocatura*/
  opacity: 0;
  transition: 0.3s;
}


/* Posizione puntatore del tooltip */

span.tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #803c25 transparent;
}

.social ul li:hover span.tooltiptext {
  visibility: visible;
  opacity: 1;
}


/*Loghi Social*/

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  text-decoration: none
}

.fa-tripadvisor {
  background: #00af87;
  color: white;
  text-decoration: none
}
    <!-- Script di Bootstrap per realizzare lo sfondo della navbar-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>



<!-- Navbar-->
<link href="nav.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <header>
    <nav class="navbar navbar-expand-sm bg-warning navbar-dark">
      <div class="container">

        <div class="logo">
          <a href="gestione.html">
            <img src="./Immagini/logo.PNG">
            <span class="tooltiptext"> Login Admin</span>
          </a>
        </div>

        <div class="nome">
          <a href="index.html">Il Brigante</a>
          <span class="tooltiptext">Home</span>
        </div>

        <div class="social">

          <ul>
            <li>
              <a class="fa fa-facebook d-flex justify-content-center" target="_blank"></a>

              <span class="tooltiptext"> Seguici su facebook</span>
            </li>

            <li>
              <a class="fa fa-tripadvisor d-flex justify-content-center" target="_blank">
              </a>

              <span class="tooltiptext"> Guarda le nostre recensioni</span>
            </li>

          </ul>
        </div>
      </div>
    </nav>
  </header>
</body>

    【讨论】：

    • 谢谢，它有效。最后一个问题：如何移动社交图标？我想在它们之间添加空间并将它们向下移动一点
    • 空格，可以使用margin
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode