Twitter bootstrap 引导：使流体行中的列居中 （2015年9月30日）底部添加了该问题的解决方案
我一直在搜索和玩CSS文件，但我似乎不能正确地得到它，相反，我只是用糟糕的解决方案修补CSS 当前设置 我有一行带有Twitter bootstrap 引导：使流体行中的列居中 （2015年9月30日）底部添加了该问题的解决方案,twitter-bootstrap,css,twitter-bootstrap-3,responsive-design,Twitter Bootstrap,Css,Twitter Bootstrap 3,Responsive Design,我一直在搜索和玩CSS文件，但我似乎不能正确地得到它，相反，我只是用糟糕的解决方案修补CSS 当前设置 我有一行带有，这一行有24列div。当我在桌面上时，它看起来很好，但当我在移动设备上时，它们会四处移动，并以难看的居中位置进行设置 我想使用行流体选项，因为我不希望24列堆叠并占用这么多空间 请参见下面的图片 全屏 小屏幕 更小的屏幕 流动的 我所做的 我添加了媒体查询以处理不同的屏幕大小，但我确信这是一种硬编码方式，我应该尽可能避免。下面是片段 @media(max-width:10
行流体@media(max-width:1000px) {
#skills .skills-item {
margin-right: 30px;
}
}
@media(min-width: 1001px) and (max-width: 1200px){
#skills .skills-item {
margin-right: 30px;
margin-left: 5px;
}
}
@media(max-width: 767px) {
#skills .skills-item {
margin-right: 55px;
margin-left: 15px;
}
}
@media(max-width: 466px) {
#skills .skills-item {
margin-right: 40px;
margin-left: 40px;
}
}
@media(max-width: 376px) {
#skills .skills-item {
margin-right: 40px;
margin-left: 30px;
}
}
margin:0auto和居中所有的将是完美的，但它没有工作。（或者我就是找不到放那个的地方）
我正在制作的网站是为了测试而在线的（根本没有完成）
谢谢大家!
编辑：添加了html和css
本节的HTML代码。我很确定你不需要所有的24件物品，但是在这里
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->
解决方案
index.html
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<!-- notice that I changed it from row-fluid to row-->
<!-- also I changed each columns from col-xs-1 to col-sm-1 -->
<div class="row">
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->
屏幕截图
/* Skill Settings */
.skill-name {
color: #fff;
display: none;
}
.skills-link:hover .skill-name {
display: table;
margin: 0 auto;
}
.skills-link:hover .two-lines {
margin-top: -5px;
}
.skills-link:hover .icon-one-line {
padding-top: 5px;
}
.skills-link:hover .skill-icon {
display: none;
}
#skills {
text-align: center;
}
#skills .skills-item {
right: 0;
margin-top: 0px;
display: inline-block;
width: 95px;
height:95px;
overflow: hidden;
}
#skills .skills-item .skills-link {
display: block;
position: relative;
margin: 0 auto;
width: 80px;
height: 80px;
background-color: #0F1A23;
text-align: center;
padding-top: 25px;
box-sizing: border-box;
}
#skills .skills-link:hover {
background-color: #000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills .skill-love:hover {
background-color: #FF0000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills * {
z-index: 2;
}
.col-sm-1 {
padding: 0;
}
/* End Skill Settings */
您的div
框实际上都不在其行容器中
换句话说，每个
都在
之外，这是一个折叠的框，因为每个div都被hvr float shadow
类绝对定位
如果在.row fluid
周围加上边框，您会注意到框上方只是一条平线
有几种方法可以“清除”这个问题。您可以尝试将overflow:hidden
作为一种方法添加到容器类（.row fluid
）。现在，该行将展开以包裹所有框
然后，为了保持方框居中，我建议将每个方框设置为内联块
.col-xs-1技能项{显示：内联块；}
并应用文本对齐：居中到父容器：
.row流体{文本对齐：居中；}
这将使框在所有屏幕尺寸中居中。只需确保删除您添加的所有边距修补程序。这是一个根据您的代码修改的工作解决方案
CSS
/* Skill Settings */
.skill-name {
color: #fff;
display: none;
}
.skills-link:hover .skill-name {
display: table;
margin: 0 auto;
}
.skills-link:hover .two-lines {
margin-top: -5px;
}
.skills-link:hover .icon-one-line {
padding-top: 5px;
}
.skills-link:hover .skill-icon{
display: none;
}
#skills{
text-align: center;
}
#skills .skills-item {
right: 0;
margin-top: 0px;
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
}
#skills .skills-item .skills-link {
display: block;
position: relative;
margin: 0 auto;
width: 80px;
height: 80px;
background-color: #0F1A23;
text-align: center;
padding-top: 25px;
box-sizing: border-box;
}
#skills .skills-link:hover {
background-color: #000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills .skill-love:hover {
background-color: #FF0000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills * {
z-index: 2;
}
/* End Skill Settings */
HTML
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->
技能概述
JAVA
JAVA
C
C
C++
C++
C#
C#
python
python
斯巴克
SPARC组件
MIPS
MIPS组件
安卓
HTML5
CSS3
JS
JAVASCRIPT
PHP脚本
APACHE服务器
SQL数据库
亚马逊网络服务
LINUX
OSX
窗户
版本控制（GIT、SVN）
日食
UNITY3D
GDB
堆栈交换
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->