Bootstrap：使列在流体行中居中

【问题标题】：Bootstrap: centering the columns in fluid rowBootstrap：使列在流体行中居中
【发布时间】：2015-10-01 01:04:59
【问题描述】：

(09/30/2015) 底部添加了此问题的解决方案

我一直在搜索和使用 CSS 文件，但我似乎无法正确理解这一点，相反，我只是在用糟糕的解决方案修补 css。

当前设置

我有一行<div class="row-fluid">，这一行有 24 列 div <div class="col-xs-1 skills-item">。当我在台式机上时，它看起来很好，但是当我在移动设备上时，它们会四处移动并以丑陋的居中位置进行设置。

我想使用row-fluid 选项，因为我不希望 24 列堆叠并占用这么多空间。

请看下面的图片。

全屏

小屏幕

更小的屏幕

手机

我做了什么

我添加了媒体查询来处理不同的屏幕尺寸，但我确信这是一种硬编码方式，我应该尽可能避免。这是sn-p

@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: 0 auto; 这样的东西和所有的居中将是完美的，但它不起作用。 （或者我只是找不到放置它的位置）

我正在做的网站是在线测试目的（根本没有完成）Here

谢谢！

编辑：添加 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 -->

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 .skills-item {
    right: 0;
    margin-top: 15px;
}


#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;
}

#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;
}

@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;
    }
}

/* End Skill Settings */

解决方案

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 -->

stylesheet.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: 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 */

截图

【问题讨论】：

  • 你能把 HTML 和 CSS 贴上来，这样我就可以制作一个小提琴并向你展示一个解决方案吗？你可以用 display: inline-block 做你想做的事。
  • 刚刚添加了代码。它使整个线程超长。我应该把它移到别的地方吗？？
  • 应该没问题，因为它们在代码块中，给我一秒钟，我会提交并回答你。
  • @Psyco430404 非常感谢！ :)

标签： twitter-bootstrap css twitter-bootstrap-3 responsive-design


【解决方案1】：

这是根据您的代码修改的有效解决方案。

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 -->

https://jsfiddle.net/or10qmkk/

您的设置方式存在一些问题，例如，您的链接因填充而疯狂流失，因为您从未设置过边框框，因此您的高度各不相同。从那里我将 .skills-item 设置为内联块，并将 #skills div 设置为 text-align center 以使它们居中。

如果您有任何问题，请在 cmets 中告诉我。

【讨论】：

  • 这与centering 部分配合得很好，但由于我认为的定位，它会切断我的框，如this？请查看this 和this。通过查看标签，我假设它是来自col-* 中的padding-left:15px bootstrap.css .. 我该怎么办？我应该覆盖它吗？
  • 如果您查看 css，我设置了一个硬宽度，如果您删除它应该允许所有内容正常适应，您也可以将宽度调整到正确的数量，它应该可以工作。
  • 我通过将所有col-xs-1 更改为col-sm-1 来修复它，显然col-xs-1 具有更好的折叠功能但更差的居中？我还为.skill-item 提供了 95px 的边距作为间距。我添加了.col-sm-1 { padding:0 } 以覆盖引导程序默认填充（左、右 15 像素）。谢谢！
  • 没问题老兄，想把我链接到最后一件事，这样我就可以看到所有的动作了吗？
  • 这里的网站更新了：saehunseanoh.me/#skills。我也会用解决方案更新这个线程！
【解决方案2】：

您的任何div 框实际上都不在它们的行容器中。

换句话说，每个&lt;div class="col-xs-1 skills-item"&gt; 都在&lt;div class="row-fluid"&gt; 之外，这是一个折叠的框，因为每个div 都是由hvr-float-shadow 类绝对定位的。

如果您在.row-fluid 周围设置边框，您会注意到它只是框上方的一条平线。

有几种方法可以“清除”问题。您可以尝试将overflow: hidden 添加到容器类（.row-fluid）中，作为一种方法。该行现在展开以包裹所有框。

然后，为了使框居中，我建议将每个框设为inline-block。

.col-xs-1 skills-item { display: inline-block; }

并将text-align: center; 应用于父容器：

.row-fluid { text-align: center; }

这应该使框在所有屏幕尺寸中居中。只需确保删除您添加的所有边距补丁即可。

【讨论】：

  • 抱歉，我错过了什么吗？我刚刚在.row-fluid 中添加了border: solid 2px #fff;，它绘制了一个白色边框，我的技能框在边框中......：o
  • 我在你的网站上。开发工具另有说法。将通过屏幕截图更新我的答案。
  • 嗯这是添加边框后的截图。 http://i.imgur.com/6mTpfuH.png
  • 不，它没有......这很奇怪，因为我的 github 有最新的代码（与我的本地代码完全相同）。我现在正在研究另一个解决方案。我会更新你。谢谢！
  • 不客气。很高兴您解决了问题。
猜你喜欢
  • 2018-05-15
  • 2016-05-23
  • 1970-01-01
  • 2019-03-14
  • 2014-09-28
  • 2020-07-29
  • 2014-10-18
  • 2011-06-22
  • 2014-07-30
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode