CSS/Bootstrap：对齐边栏右下角的 Font-Awesome 图标
CSS/Bootstrap: Align Font-Awesome icons in right-bottom corner of sidebar
我在边栏内对齐图标时遇到问题。我想在 sidebar.I 的右下角放置一些社交图标，尝试使用边距，但它看起来又丑又丑。
Here's an example in JSBin（请将 window 的大小调整为至少 1000px）。
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
@media (min-width: 992px) {
.sidebar {
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: 50px;
list-style: none;
text-align: right;
margin-right: 20px;
}
ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
color: tomato;
}
.hi {
margin-right: 20px;
text-align: right;
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;
}
.icons-sidebar-unit {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: baseline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRZEMO PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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 " alt="pic">
</div>
<h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>
<!-- MENU -->
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<!-- footer ICONS -->
<footer>
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
<i class="fa fa-twitter-square"></i>
</a>
<a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
<i class="fa fa-facebook-square"></i>
</a>
<a title="" href="#" class="icons-sidebar-unit">
<i class="fa fa-google-plus-square"></i>
</a>
<a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
<i class="fa fa-youtube-square"></i>
</a>
</div>
<div class="copyright">
Copyright © 2017. Designed by
<a href=http://www.uiueux.com>wwwS</a>.
</div><!--End copyright-->
<!--
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
<div class="container-fluid">
<h2 id="projects">RECENT PROJECTS</h2>
<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>
SKILLZ:<br>
HTML 5 - PRO <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">
<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">
<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>
</body>
</html>
要将图标右对齐，请尝试：
.icons-sidebar-unit {
float: right;
}
此外，在查看您的代码时，我注意到您的图标单元的高度/宽度设置为 30px。如果这是为了增加图标本身的大小，请尝试：
.icons-sidebar-unit {
font-size: 30px;
}
很多人对此感到困惑，因为图标的样式似乎应该像图像一样，但实际上它们的样式却像字体。
最简单的方法可能是绝对定位它们 .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output
你也可以使用 flexbox。使侧边栏成为列弹性容器，将页脚设置为 flex-grow: 1 以便它延伸到侧边栏的底部，使用 margin-top: auto 和 order: 1 将社交图标放在底部然后对齐他们向右 text-align: right 或 align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output
我在边栏内对齐图标时遇到问题。我想在 sidebar.I 的右下角放置一些社交图标，尝试使用边距，但它看起来又丑又丑。
Here's an example in JSBin（请将 window 的大小调整为至少 1000px）。
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
@media (min-width: 992px) {
.sidebar {
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: 50px;
list-style: none;
text-align: right;
margin-right: 20px;
}
ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
color: tomato;
}
.hi {
margin-right: 20px;
text-align: right;
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;
}
.icons-sidebar-unit {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: baseline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRZEMO PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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 " alt="pic">
</div>
<h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>
<!-- MENU -->
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<!-- footer ICONS -->
<footer>
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
<i class="fa fa-twitter-square"></i>
</a>
<a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
<i class="fa fa-facebook-square"></i>
</a>
<a title="" href="#" class="icons-sidebar-unit">
<i class="fa fa-google-plus-square"></i>
</a>
<a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
<i class="fa fa-youtube-square"></i>
</a>
</div>
<div class="copyright">
Copyright © 2017. Designed by
<a href=http://www.uiueux.com>wwwS</a>.
</div><!--End copyright-->
<!--
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
<div class="container-fluid">
<h2 id="projects">RECENT PROJECTS</h2>
<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>
SKILLZ:<br>
HTML 5 - PRO <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">
<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">
<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>
</body>
</html>
要将图标右对齐，请尝试：
.icons-sidebar-unit {
float: right;
}
此外，在查看您的代码时，我注意到您的图标单元的高度/宽度设置为 30px。如果这是为了增加图标本身的大小，请尝试：
.icons-sidebar-unit {
font-size: 30px;
}
很多人对此感到困惑，因为图标的样式似乎应该像图像一样，但实际上它们的样式却像字体。
最简单的方法可能是绝对定位它们 .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output
你也可以使用 flexbox。使侧边栏成为列弹性容器，将页脚设置为 flex-grow: 1 以便它延伸到侧边栏的底部，使用 margin-top: auto 和 order: 1 将社交图标放在底部然后对齐他们向右 text-align: right 或 align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output