【发布时间】：2020-12-31 22:50:58
【问题描述】：
我遇到了导航项目未显示的问题。虽然不可见，但注册和注销导航是“可点击的”，它是不可见的，但是当我将鼠标悬停在它上面时，我可以点击它并需要我进行注册，相反，我可以在注册并登录后点击注销。无我的其他导航项目甚至以无形的方式显示给我点击。对于未登录的用户，应该显示注册和登录的导航项，然后在用户登录后显示一些导航项。
正如您在我的 sn-p 中看到的，当您将鼠标悬停在右侧时，您可以单击一个链接，但它是不可见的。同样正如我所说，当用户尚未登录时，它应该是 2 个链接。
.navbar-nav li a {
padding-left: 35px;
padding-right: 10px;
margin-top: -20px;
margin-bottom: -20px;
color: yellow;
position: fixed;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron {
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding: 50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a {
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook {
color: #3b5998;
}
.fa-twitter {
color: #00aced;
}
.fa-goggle-plus-g {
color: #dd4b39;
}
.fa-instagram {
color: #517fa4;
}
.fa-youtube {
color: #bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover {
color: #d5d5d5;
}
footer {
padding-top: 3.5rem;
color: blue;
background-color: #ffffff
}
hr.light {
border-top: 1px solid red;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
hr.light-100 {
border-top: 1px solid #;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container {
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container {
height: 150px;
background: #7F00FF;
}
.image-container {
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px, 100px);
}
.image-container img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container {
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3,
h4 {
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4 {
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p {
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn {
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover {
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class="notification" />
<style>
<!-- Add this tag --> {
% block styles %
}
{
% endblock %
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md">
<div class="container-fluid">
<a class='navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}">
<h5 style="color:red"></h5>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %} {% unread_messages request.user as user_unread_messages %} {% if user_unread_messages > 0 %}
<li class="nav-item">
<a class="notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<a href="http://www.facebook.com/"><i class="fab fa-facebook"></i></a>
<a href="http://www.twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="http://www.instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="http://www.google.com/"><i class="fab fa-google-plus-g"></i></a>
<a href="http://www.youtube.com/"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz@gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>【问题讨论】：
-
1.您可以单击的链接不是不可见的，它是空的。 2. 可以点击的链接是按钮，不是链接。 3. Please only include the relevant code for this question 4. 这个问题可能与你的后端设置有关。当我删除所有模板数据时，所有链接都出现了，所以这可能不是 CSS 问题。
-
@RaheelJunaid 我的后端设置是什么意思？我想这解释了为什么它适用于我在 heroku 上的生产版本，但它不适用于我的本地服务器......当你删除所有模板数据时，你是什么意思？你是怎么做到的？
-
嗯，后端提供了模板上下文或信息（我假设您使用的是 Django），您已经使用 {% if %} 语句或模板数据实现了它。如果您删除导航栏中的所有这些语句，则会显示所有链接。
-
实际上，当我取出所有这些 if 语句时，我的链接无法连接到我的视图函数......这很奇怪，因为这一切都适用于我在 heroku 上托管的生产代码。我刚买了一台新的 Mac，但我把所有东西都转移了。是否可能缺少依赖项？
-
可能。如果 CSS 在 Heroku 上工作，那么它可能是您所建议的本地开发环境问题。抱歉，我无法提供更多帮助。