1
我正在做我的第一个网站，我必须有一个侧边栏。所以我决定把twitter嵌入时间表。当我改变窗口的大小时，问题就开始了。我有响应式菜单，但Twitter嵌入式时间线总是与我的内容重叠。当我认为窗户太小时，我试着分配最大高度或宽度。使用display-none将会在段落旁边会有空白空间，我不想解决这个问题。我不喜欢我在互联网上找到的切换选项。你有什么建议？隐藏Twitter侧栏
body {
\t margin: 0;
\t padding: 0;
\t font-family: sans-serif;
}
header {
\t background-color: #000000;
\t opacity: 0.9;
\t width: 100%;
\t padding: 40px 0; /* 40 hore a dole 0 po stranach */
\t text-align: center;
\t color: white;
}
a{
\t text-decoration: none;
\t color: inherit;
}
nav ul {
\t background-color: #000000;
\t overflow: hidden;
\t color: white;
\t padding: 0;
\t text-align: center;
\t margin: 0;
\t opacity: 0.7;
\t -webkit-transition: max-height 0.4s;
\t -ms-transition: max-height 0.4s;
\t -moz-transition: max-height 0.4s;
\t -o-transition: max-height 0.4s;
\t transition: max-height 0.4;
}
nav ul li {
\t display: inline-block;
\t padding: 20px;
}
nav ul li:hover{
\t opacity: 0.75;
}
section {
\t line-height: 1.5em;
\t font-size: 0.9em;
\t width: 75%;
\t margin: 0 auto;
}
h1 {
\t display: block;
\t color: #000000;
font-size: 10em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.handle {
\t width: 100%;
\t color: white;
\t background-color: #000000;
\t opacity: 0.75;
\t text-align: left;
\t box-sizing: border-box; /*100 sirka a paddding by pretekala */
\t padding: 15px 10px;
\t cursor: pointer;
\t display: none;
}
i{
\t float: right;
}
.uvitanie {
\t background-color: #ffffff;
\t margin: 10px 320px 10px 10px;
}
@media screen and (max-width: 700px) {
\t nav ul {
\t \t max-height: 0; /*lepsie ako nastavovanie vysky */
\t }
\t .showing {
\t \t max-height: 20em;
\t }
\t nav ul li {
\t \t width: 100%;
\t \t box-sizing: border-box; /*100 sirka a paddding by pretekala */
\t \t padding: 15px;
\t \t text-align: center;
\t }
\t .handle{
\t \t display: block;
\t }
\t .sidebar {
\t \t
\t }
}
.sidebar {
\t margin: 10px;
\t border-radius: 5px;
\t padding: 15px;
\t font-size: 100%;
\t float: right;
\t width: 350px;
}
h1 {
\t display: block;
\t text-align: center;
font-size: 3.5em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
\t display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 10px;
margin-right: 0;
font-weight: bold;
}<!DOCTYPE html>
<html>
<head>
\t <script>window.twttr = (function(d, s, id) {
\t var js, fjs = d.getElementsByTagName(s)[0],
\t t = window.twttr || {};
\t if (d.getElementById(id)) return t;
\t js = d.createElement(s);
\t js.id = id;
\t js.src = "https://platform.twitter.com/widgets.js";
\t fjs.parentNode.insertBefore(js, fjs);
\t t._e = [];
\t t.ready = function(f) {
\t t._e.push(f);
\t };
\t return t; //script pre twitter
\t }(document, "script", "twitter-wjs"));</script>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
\t <title>Svet Fruscianteho</title>
\t <script src="https://use.fontawesome.com/c62e354f4b.js"></script>
\t <link rel="stylesheet" type="text/css" href="css/design.css">
</head>
<body>
\t <header>
\t \t \t Svet Fruscianteho
\t </header>
\t <nav>
\t \t <ul>
\t \t \t <li><a href="index.html">Domov</a></li>
\t \t \t <li><a href="albumy.html">Albumy</a></li>
\t \t \t <li><a href="rhcp.html">RHCP</a></li>
\t \t \t <li><a href="projekty.html">Projekty</a></li>
\t \t </ul>
\t \t <div class="handle">Menu
\t \t \t \t <i class="fa fa-bars" aria-hidden="true"></i>
\t \t </div>
\t </nav>
\t <aside class="sidebar">
\t \t <p>
\t \t \t <a class="twitter-timeline" data-width="350" data-height="500" data-theme="light" href="https://twitter.com/johnfrusciante">Tweets by johnfrusciante</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8">
\t \t \t \t //samotny embedded timeline
\t \t \t </script>
\t \t </p>
\t </aside>
\t
\t <section>
\t \t <h1>Novinky</h1>
\t \t <h2>John Frusciante strávil Vianoce s vdovou slávneho rockera.</h2>
\t \t <p class="uvitanie">
\t \t \t Text in foreign language and Instagram embedded photo. \t \t
\t \t </p>
\t </section>
\t <script>
\t $(".handle").on("click", function() {
$("nav ul").toggleClass("showing");
}); //script for the menu
\t </script>
\t
</body>
</html>
编写一个媒体查询以在微小屏幕上隐藏twitter时间线。 –
（顺便说一句）你可能想要三明治留在顶部，否则用户需要滚动到关闭菜单。 –