我不知道如何在将屏幕大小调整到页面底部后从侧边栏移动社交图标。我尝试使用媒体查询，但没有运气。有任何想法吗？ https://jsbin.com/qegayapoya/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PR PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Merriweather|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel=icon href=favicon.ico>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="container">
<div class="row">
<div class="col-md-3 sidebar">
<div class="foto">
<img src="pic.png" class=" img-responsive img-circle center-block " alt="pic"></div>
<h3 class="hi">Hi! I am <strong>JON</strong>, a front-end developer.</h3>
<!-- MENU -->
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<!-- footer ICONS -->
<footer >
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="" href="mailto:pqsdny@gmail.com" class="icons-sidebar-unit">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</a>
<a title="" href="https://github.com/dyat" class="icons-sidebar-unit">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a title="" href="https://www.linkedin.com/in/williamhgates/pl" class="icons-sidebar-unit">
<i class="fa fa-linkedin " aria-hidden="true"></i>
</a>
</div>
<!--
<i class="fa fa-linkedin A " aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i> -->
</div>
</footer>
<!-- MAIN -->
<div class="col-md-9 col-md-offset-3 content">
<h2 id="about">ABOUT ME</h2>Hello! Creating fuctional and well designed websites was always my goal. To do that, I am using diffrent methods and web technologies. Learning and continous progress is bigest advantage. I am currenty looking for my first job as a junior front-end developer.
<h2 id="projects">RECENT PROJECTS</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="1.png" alt="" class="img-responsive img-thumbnail"></div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="2.png" alt="" class="img-responsive img-thumbnail"></div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="3.png" alt="" class="img-responsive img-thumbnail"></div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="4.png" alt="" class="img-responsive img-thumbnail"></div>
</div>
</div></div>
<br><h2 id="skills">SKILLS</h2
<br>
HTML 5 - HERO <br>
CSS 3 - PRO <br>
JS - NOOB <br>
JQUERY - NOOB<br>
SASS - MAD <br>
GRUNT - GOD
<hr>
<h2 id="contact">CONTACT</h2>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group " data-wow-delay="0.5s">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group " data-wow-delay="0.5s">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<textarea class="form-control" id="" name="">message</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label" for="singlebutton"></label>
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
</div>
</div>
</fieldset>
</form>
<img src="qrcode1.png" class="img-responsive center-block" alt=""> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
@media (min-width: 992px) {
.sidebar {
font-family:'Raleway', sans-serif;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: tomato;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
}
ul li {
margin: 0 auto;
line-height: 60px;
list-style: none;
text-align: center;
margin-right: 40px;
/*czemu to srodkuje calosc???margin*/
font-size: 24px;
padding: 4px;
}
li a{
color: rgba(255, 255, 255, 0.4);
transition: color 0.3s ease-in-out;
text-align: center;
}
a:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.3);
padding: 0px;
}
.hi {
margin-right: 20px;
text-align: center;
color: rgba(0, 0, 0, 0.4);
}
.content {
padding: 2% 4% 2% 4%;
color: rgba(0, 0, 0, 0.4);
background-color: #F2F0F1;
}
#fixedbutton {
position: fixed;
top: 0px;
right: 0px;
}
.sidebar-bottom-wrap {
position: absolute;
bottom: 60px;
right: 40px;
max-width: 200px;
}
.foto {
margin-top: 10px;
}
.social-icons-sidebar {
position: absolute;
bottom: 20px;
left:0;
right: 0;
text-align: center;
font-size: 30px;
}
.fa {
color: rgba(255, 255, 255, 0.4);
}
.fa:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.3);
transition: color 0.3s ease-in-out;
}
#about{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 15px;
}
#projects{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
}
#skills{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
}
#contact{
font-family:'Raleway', sans-serif;
letter-spacing: 8px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
}
/*
'Merriweather', serif;
font-family:
*/
答案 0 :(得分：0)
将此添加到css样式的末尾。
@media (max-width: 992px) {
.social-icons-sidebar{
position:static;
}
}