我的页脚背景在768px处消失，由于我的标题代码中的媒体查询，它打破了所有样式：
[type="checkbox"], label {
display: none;
}
@media screen and (max-width: 768px) {
nav ul {
display: none;
}
如何解决此问题？ 我试过多个浏览器，页脚只能在低于768px的时候工作。
/* ----------------------------- Footer ------------------------------ */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer { background-color:#0c1a1e; min-height:350px; font-family: 'Open Sans', sans-serif; }
.footerleft { margin-top:50px; padding:0 36px; }
.logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;}
.footerleft p { color:#fff; font-size:12px !important; font-family: 'Open Sans', sans-serif; margin-bottom:15px;}
.footerleft p i { width:20px; color:#999;}
.paddingtop-bottom { margin-top:50px;}
.footer-ul { list-style-type:none; padding-left:0px; margin-left:2px;}
.footer-ul li { line-height:29px; font-size:12px;}
.footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; }
.footer-ul i { margin-right:10px;}
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; }
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul { list-style-type:none !important; margin:0px; padding:0px;}
.icon-ul li { line-height:75px; width:100%; float:left;}
.icon { float:left; margin-right:5px;}
.copyright { min-height:40px; background-color:#000000;}
.copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0px;}
.heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;}
.post p { font-size:12px; color:#FFF; line-height:20px;}
.post p span { display:block; color:#8f8f8f;}
.bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
.bottom_ul li { float:left; line-height:40px;}
.bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
.bottom_ul li a { color:#FFF; font-size:12px;}
我正在使用flask作为后端，所以这是我的带有jinja模板块的html：
<header>
<div class="inner">
<nav>
<a href="{{ url_for('home_page') }}" class="logo">My App Logo.</a>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li><a href="{{ url_for('home_page') }}">Home</a></li>
<li><a href="{{ url_for('user_page') }}">Dashboard</a></li>
<li><a href="{{ url_for('trends') }}">Trends</a></li>
<li><a href="{{ url_for('pricing') }}">Pricing</a></li>
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('user_profile_page') }}">
{{ current_user.first_name or current_user.user_auth.username }}</a></li>
<li><a href="{{ url_for('user.logout') }}">Sign out</a></li>
{% else %}
<li><a href="{{ url_for('user.login') }}">Sign in</a></li>
{% endif %}
</ul>
</nav>
</div>
</header>
<body>
{% block body %}
<footer>
{% block footer %}
<div class="pull-left"><a href="#">Privacy Policy</a> | <a href="#">Terms Of Service</a></div>
<div class="pull-right">© 2017 All rights reserved.</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> 254, Fake Adress, California</p>
<p><i class="fa fa-phone"></i> Phone (India) : +54 6846 887</p>
<p><i class="fa fa-envelope"></i> E-mail : ihello@jkjd.com</p>
</div>
<div class="col-md-2 col-sm-6 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
<li><a href="#"> Terms & Conditions</a></li>
<li><a href="#"> Client Gateway</a></li>
<li><a href="#"> Ranking</a></li>
<li><a href="#"> Case Studies</a></li>
<li><a href="#"> Frequently Ask Questions</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<h6 class="heading7">LATEST POST</h6>
<div class="post">
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
</footer>
<div class="copyright">
<div class="container">
<div class="col-md-6">
<p>© 2016 - All Rights with Webenlance</p>
</div>
<div class="col-md-6">
<ul class="bottom_ul">
<li><a href="#">Lorem</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faq's</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
</div>
</div>
答案 0 :(得分：1)
你发布的媒体查询中的CSS与页脚无关......但我有一个想法：你发布了这个......
style ...并写道，这是在你的标题代码中 - 无论这意味着什么（在@media screen and (max-width: 768px) {
nav ul {
display: none;
}
}
标记内？）
但是，在刚刚发布的代码中，缺少媒体查询的结束花括号。如此接近 - 这可能是你问题的原因：
{{1}}
答案 1 :(得分：1)
尝试以下css
package main
import (
"fmt"
"github.com/gizak/termui"
"time"
"strconv"
)
func getData(ch chan string) {
i := 0
for {
ch <- strconv.Itoa(i)
i++
time.Sleep(time.Second)
if i == 20 {
break
}
}
}
func Display(ch chan string) {
err := termui.Init()
if err != nil {
panic(err)
}
defer termui.Close()
termui.Handle("/sys/kbd/q", func(termui.Event) {
fmt.Println("q captured")
termui.Close()
termui.StopLoop()
})
for elem := range ch {
par := termui.NewPar(elem)
par.Height = 5
par.Width = 37
par.Y = 4
par.BorderLabel = "term ui example with chan"
par.BorderFg = termui.ColorYellow
termui.Render(par)
}
}
func main() {
ch := make(chan string)
go getData(ch)
Display(ch)
}
答案 2 :(得分：0)
由于@media查询行将max-width设置为768px，这意味着页脚不会超过最大宽度。尝试更改此值，看看会发生什么。