Javascript 引导柱不是水平的_Javascript_Html_Css_Twitter Bootstrap

Javascript 引导柱不是水平的

javascript html css twitter-bootstrap

Javascript 引导柱不是水平的,javascript,html,css,twitter-bootstrap,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=

我目前正在制作一个包含图像作为缩略图的专栏。我不明白为什么这些柱子没有像我希望的那样水平对齐

下面是我指的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>

实际上，屏幕的整个宽度被划分为12个部分，用于所有类型的屏幕

所以你只能根据格里格系统来划分

请不要像这样在标签中的类名之前添加

[dot]

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

圆点只能用于书写风格

对于您的需求，请尝试以下方式：

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

请参考[jsfiddle]

如上所述，您在类属性中添加了点。但是您也错过了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或jsfiddle@ccjmne：编辑CSS后：）@Jatin已修复。谢谢你指出：）给你，对不起

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

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