Question

您好我希望我的标题中的社交媒体图标能够响应，但是当我最小化浏览器时，社交媒体图标没有显示。有人可以给我一些想法吗？我应该使用媒体查询吗？

这是没有最小化的图片。

这是最小化社交媒体图标消失的图片。

这是我的HTML代码。

// disable-eslint-line

这是我的css

<!DOCTYPE html>
<html>
<head>
    <title>Student Portal</title>
    <link rel="stylesheet" href ="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="style.css" rel ="stylesheet">
    <link rel="shortcut icon" type="img/png" href="img/asd.png"/>
</head>
<body>
    <div class ="top-bar-dark">
        <div class="container">
            <div class="row">
                  <div class="col-sm-4 hidden-xs">
                        <div class="top-bar-socials">
                            <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
                                <i class="fa fa-facebook"></i>
                            </a>
                            <a href="https://twitter.com/official_gapc">
                                <i class="fa fa-twitter"></i>
                            </a>
                            <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
                                <i class="fa fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
             <div class="col-sm-8 text-right">
                        <ul class="list-inline top-dark-right">                      
                            <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
                            <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
                            <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
                        </ul>
                    </div>

        </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>
</body>
</html>

更新：删除“hidden-xs”后，它们没有对齐。

Answer 1

它们消失的原因是因为您已将“hidden-xs”类应用于包含社交媒体图标的div。删除该类以保留社交媒体图标。如果需要，很高兴发布代码示例，但请尝试将其作为开始。您可能希望为媒体查询添加样式以调整大小和位置等。

从此处删除课程：

<div class ="top-bar-dark">
    <div class="container">
        <div class="row">
              <div class="col-sm-4 hidden-xs">

Answer 2

当屏幕低于某个宽度时，第4个div中的hidden-xs类会导致自身被隐藏。

您可以删除它并继续显示图标：

https://jsfiddle.net/zj8jc7uf/

Answer 3

媒体社交图标消失的原因是因为您将“hidden-xs”应用于div容器的社交媒体图标。您可以在此处查看我编辑的内容

.top-bar-dark {
  background-color: #a92419;
}

.top-bar-light {
  background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
  border-color: #ddd;
}

.top-bar-light .top-dark-right li a:hover {
  color: #32c5d2;
}
.top-bar-socials {
  line-height: 30px;
  padding-top: 5px;

}
.top-bar-socials:after {
  display: table;
  clear: both;
  content: "";
}
.top-bar-socials a {
  margin: 0px 8px;
  text-decoration: none;
  font-size:18px;
  color: #fff;
}

.top-dark-right {
  margin: 0px;
  padding: 0px;
}

.top-dark-right li {
  line-height: 40px;
  border-left: 1px solid #932015;
  padding: 0px 10px;

}

.top-dark-right li, .top-dark-right li a {
  color: #d7d7d7;
  font-size: 12px;
}

.top-dark-right li i {
  margin-right: 5px;
}

.top-dark-right li a:hover {
  color: #fff;
}
a.login{
  text-decoration: none;
}
.fa-facebook:hover{
  color:#3b5998;
}
.fa-twitter:hover{
  color:#1dcaff;
}
.fa-linkedin:hover{
  color:#007bb5;
}

<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class ="top-bar-dark">
        <div class="container">
            <div class="row">
                  <div class="col-xs-4">
                        <div class="top-bar-socials">
                            <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
                                <i class="fa fa-facebook"></i>
                            </a>
                            <a href="https://twitter.com/official_gapc">
                                <i class="fa fa-twitter"></i>
                            </a>
                            <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
                                <i class="fa fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
             <div class="col-xs-8 text-right">
                        <ul class="list-inline top-dark-right">                      
                            <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
                            <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
                            <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
                        </ul>
                    </div>

        </div>
    </div>

标题中的响应链接

3 个答案: