我不知道如何在调整屏幕大小后将社交图标从侧边栏移动到页面底部。我尝试使用媒体查询但没有成功。有任何想法吗？ 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:
*/
最佳答案
将此添加到您的 css 样式的末尾。
@media (max-width: 992px) {
.social-icons-sidebar{
position:static;
}
}
关于css - 如何根据屏幕分辨率移动图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44208252/