Bootstrap列垂直对齐而不是水平对齐

时间：2014-09-03 03:32:34

标签： javascript html css twitter-bootstrap

我目前正在开发一些包含缩略图图像的列。我无法弄清楚为什么列没有像我希望的那样水平对齐。

以下是我提到的html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Townsville Rentals</title>
        <!-- Bootstrap Css -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="Index.css" rel="stylesheet">
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <div class="wrapper">
            <div class="header">
                <img class="logo" src="images/logo.png" alt="logo">
                <ul class="nav pull-right">
                    <li class="nav-text">HOME</li>
                    <li class="nav-text">ABOUT</li>
                    <li class="nav-text">PROPERTY OWNERS</li>
                    <li class="nav-text">TENATS</li>
                    <li class="nav-text">CONTACT US</li>
                    <li class="nav-number">1300 702 305</li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div class="top-content">
                <img class="arrows" src="images/arrows.png" alt="arrows">
                <img class="slider" src="images/slider.png" alt="slider">
            </div>
        </div>
        <div class="wrapper">
            <h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
            <div class="row">
                <div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
                <div class=".col-md-4"><img src="images/fees.png" alt="fees"></div>
                <div class=".col-md-4"><img src="images/four.png" alt="four"></div>
                <div class=".col-md-4"><img src="images/realistic.png" alt="real"></div>
                <div class=".col-md-4"><img src="images/regular.png" alt="reg"></div>
                <div class=".col-md-4"><img src="images/relax.png" alt="relax"></div>
            </div>
        </div>
        <div class="wrapper">
            <div class="">
            </div>
        </div>
    </body>
</html>

以下是相关的CSS：

html,body
{
    margin-left: auto;
    margin-right: auto;
    width: 1370px;
}
.wrapper
{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.header
{
    margin: auto;
    max-width: 1370px;
}
.logo
{
    padding-left: 50px;
    padding-top: 30px;
}
.nav
{
}
.nav-text
{
    display: inline-block;
    float: left;
    font-family: "GothamSSm Meduim";
    font-size: 12px;
    font-style: bold;
    list-style-type: none;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-right: 70px;
    top: 45px;
}
.nav-number
{
    color: #45aa4a;
    display: inline;
    float: right;
    font-family: "GothamSSm Meduim";
    list-style-type: none;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-right: 65px;
    top: 45px;
}
.arrows
{
    padding-left: 575px;
    padding-right: 685px;
    padding-top: 45px;
}
.slider
{
    margin-left: auto;
    margin-right: auto;
    max-height: 100%;
    max-width: 100%;
    padding-top: 60px;
}
.thumbnail-title
{
    margin-left: auto;
    margin-right: auto;
    padding-top: 250px;
    text-align: center;
}
.thumbnail
{
    border: 2px solid red;
    display: inline;
}

2 个答案:

答案 0 :(得分：1)

实际上，根据bootstrap grid system

，屏幕的整个宽度分为12个部分，适用于各种屏幕

所以你必须按照grig系统划分

请不要像{/ p>这样在标签中的类名之前. [点] 

<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
            ^

dot只能用于书写样式！

对于你的要求尝试这样：

           <div class="row">
                <div class="col-md-2">
                    <img src="layouts/08.png" alt="extra"></div>
                <div class="col-md-2">
                    <img src="layouts/11.png" alt="fees"></div>
                <div class="col-md-2">
                    <img src="layouts/11.png" alt="four"></div>
                <div class="col-md-2">
                    <img src="layouts/11.png" alt="real"></div>
                <div class="col-md-2">
                    <img src="layouts/11.png" alt="reg"></div>
                <div class="col-md-2">
                    <img src="layouts/11.png" alt="relax"></div>
            </div>

答案 1 :(得分：0)

请参阅[jsfiddle] http://jsfiddle.net/matildayipan/vzg9fhot/3/

您在类属性中添加了点，如上所述。 但你也错过了css中的课堂声明

<div class="wrapper">
    <div class="header">
        <img class="logo" src="images/logo.png" alt="logo">
        <ul class="nav pull-right">
            <li class="nav-text">HOME</li>
            <li class="nav-text">ABOUT</li>
            <li class="nav-text">PROPERTY OWNERS</li>
            <li class="nav-text">TENATS</li>
            <li class="nav-text">CONTACT US</li>
            <li class="nav-number">1300 702 305</li>
        </ul>
    </div>
</div>
<div class="wrapper">
    <div class="top-content">
        <img class="arrows" src="images/arrows.png" alt="arrows">
        <img class="slider" src="images/slider.png" alt="slider">
    </div>
</div>
<div class="wrapper">
    <h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
    <div class="row">
        <div class="col-md-2"><img src="images/extra.png" alt="extra"></div>
        <div class="col-md-4"><img src="images/fees.png" alt="fees"></div>
        <div class="col-md-4"><img src="images/four.png" alt="four"></div>
        <div class="col-md-4"><img src="images/realistic.png" alt="real"></div>
        <div class="col-md-4"><img src="images/regular.png" alt="reg"></div>
        <div class="col-md-4"><img src="images/relax.png" alt="relax"></div>
    </div>
</div>
<div class="wrapper">
    <div class="">
    </div>
</div>

Css：

.col-md-2{
    //add your css
}

.col-md-4{
    //add your css
}


html,body {
    margin-right: auto;
    margin-left: auto;
    width:1370px;

}
.wrapper{
    margin-right: auto;
    margin-left: auto;
    width:100%;
}

/* Start of header*/
.header{
    margin:auto;
    max-width: 1370px;
}

.logo{

    padding-left:50px;
    padding-top:30px;

}


.nav-text{
    display: inline-block;
    list-style-type:none;
    top:45px;
    float: left;
    font-family: "GothamSSm Meduim";
    font-size:12px;
    font-style:bold;
    padding-right: 70px;
    max-width:100%;
    max-height: 100%;
    overflow: hidden;


}
.nav-number{
    display: inline;
    list-style-type:none;
    float:right;
    top:45px;
    padding-right:65px;
    color:#45aa4a;
    font-family: "GothamSSm Meduim";
    max-width:100%;
    max-height: 100%;
    overflow:hidden;

}
 /* End of header container*/
 /* Start of top content*/

.arrows{
        padding-right:685px;
        padding-left: 575px;
        padding-top:45px;


}

.slider{
    margin-left: auto;
    margin-right: auto;
    padding-top:60px;
    max-width:100%;
    max-height: 100%;
}

/*end */

.thumbnail-title {
    padding-top: 250px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.thumbnail{
    display:inline;
    border: 2px solid red;
    }
相关问题
最新问题