Bootstrap colums algining veritcaly not horizontaly

我目前正在研究一些包含图像缩略图的列。我无法弄清楚为什么列没有像我希望的那样水平对齐。Bootstrap colums algining veritcaly not horizontaly

这里是我指的是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; 
}

来源

2014-09-03 Euphoric Eugene

，请复制粘贴CSS或的jsfiddle – Jatin 2014-09-03 03:33:46

@ccjmne：你的编辑CSS走了:) – Jatin 2014-09-03 03:39:53

@Jatin后固定。谢谢你指出:) – ccjmne 2014-09-03 03:40:32

其实屏幕的整个宽度被分为12个章节根据bootstrap grid system

各种屏幕所以你必须根据格里格系统只分

请不要你的类名前. [点]在标签这样

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

点应该只在写作风格可以用！

为YOUT需求尝试这样的：

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

来源

2014-09-03 04:08:27

请参考[的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; 
    }

来源

2014-09-03 04:15:33

Bootstrap colums algining veritcaly not horizo​​ntaly

回答

相关问题

Bootstrap colums algining veritcaly not horizontaly