列不對齊。引導

我正在使用Bootstrap，我想知道爲什麼列沒有正確對齊。即使我調整了寬度並使其適合，第二列也低於第一列。我真的好奇。但是我的元素被正確編碼。我甚至嘗試使用內聯塊，但它互相重疊。下面是HTML和CSS代碼列不對齊。引導

CODE：（HTML）

<body> 
    <div class = "container"> 
     <div class = "row"> 
      <div class = "banner"> 
       <div class = "bannerimg"> 

       </div> 
      </div> 
     </div> 
     <div class = "row"> 
      <div class = "col-md-2"> 
       <div class = "navigation"> 
        <div class = "sidenav1"> 
         <ul class = "list"> 
          <li><a href = "#">Home</a></li> 
          <li><a href = "#">Track</a></li> 
          <li><a href = "#">Program</a></li> 
          <li><a href = "#">Vehicles</a></li> 
          <li><a href = "#">Prices</a></li> 
          <li><a href = "#">Photos</a></li> 
          <li><a href = "#">Our Staff</a></li> 
          <li><a href = "#">Comments</a></li> 
          <li><a href = "#">Links</a></li> 
          <li><a href = "#">Contact</a></li> 
          <li><a href = "#">About Us</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <div class = "col-md-8"> 
       <div class = "mainContent"> 

       </div> 
      </div> 
     </div> 
    </div>

CODE：（CSS）

.bannerimg 
{ 
    background-color: black; 
    border: 1px solid yellow; 
    height: 125px; 
    max-width: 100%;  
    display: block; 
} 

.list 
{ 
    list-style-type: none; 
    margin-left: -10px; 
} 

.sidenav1 
{ 
    background-color: orange; 
    border: 1px solid yellow; 
    max-height: 40%; 
    width: 150px; 
    margin-top: 20px; 
} 

.mainContent 
{ 
    border-color: orange; 
    border: 1px solid yellow; 
    margin-top: 20px; 
    width: 70%; 

}

來源

2014-11-05 Jessie

您正在測試的設備的尺寸是多少？ bootstrap被設計爲響應並且在沒有足夠空間時包裝列。也許使用'sm'而不是'md'就是你想要的？ – briansol 2014-11-05 15:28:59

Bootply中的問題：http：//www.bootply.com/J338LOBxGz。如果你想在小尺寸旁邊使用'sm'，而不是中等。是否有理由爲什麼你的網格不是8和4或10和2？ – Aibrean 2014-11-05 15:37:56

我正在使用筆記本電腦，這就是爲什麼我使用MD。 – Jessie 2014-11-06 11:49:11

你不應該設置寬度爲柱，引導的col-*類已經根據視口的寬度以百分比設置適當的寬度。

嘗試從您的CSS中刪除width，然後在側邊欄上使用col-sm-4，在內容上使用col-sm-4，並查看是否您要的效果。

查看下面的代碼片段（運行它的全頁並調整瀏覽器的大小以查看佈局更改）。

.bannerimg 
 
{ 
 
    background-color: black; 
 
    border: 1px solid yellow; 
 
    height: 125px; 
 
    max-width: 100%;  
 
    display: block; 
 
} 
 

 
.list 
 
{ 
 
    list-style-type: none; 
 
    margin-left: -10px; 
 
} 
 
.sidenav1 
 
{ 
 
    background-color: orange; 
 
    border: 1px solid yellow; 
 
    max-height: 40%; 
 
    /*width: 150px;*/ 
 
    margin-top: 20px; 
 
} 
 
    
 
.mainContent { 
 
    border-color: orange; 
 
    border: 1px solid yellow; 
 
    margin-top: 20px; 
 
    /*width: 70%;*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class = "container"> 
 
    <div class = "row"> 
 
     <div class = "banner"> 
 
      <div class = "bannerimg"> 
 
       Some image 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class = "row"> 
 
     <div class = "col-sm-4"> 
 
      <div class = "navigation"> 
 
       <div class = "sidenav1"> 
 
        <ul class = "list"> 
 
         <li><a href = "#">Home</a></li> 
 
         <li><a href = "#">Track</a></li> 
 
         <li><a href = "#">Program</a></li> 
 
         <li><a href = "#">Vehicles</a></li> 
 
         <li><a href = "#">Prices</a></li> 
 
         <li><a href = "#">Photos</a></li> 
 
         <li><a href = "#">Our Staff</a></li> 
 
         <li><a href = "#">Comments</a></li> 
 
         <li><a href = "#">Links</a></li> 
 
         <li><a href = "#">Contact</a></li> 
 
         <li><a href = "#">About Us</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class = "col-sm-8"> 
 
      <div class = "mainContent"> 
 
       Some content 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2014-11-05 15:41:46 seiseises

仍然沒有工作:( – Jessie 2014-11-06 11:47:31

什麼是不工作？也許其他一些風格是碰撞，我只是用你發佈的內容。你究竟需要列對齊？ – seiseises 2014-11-06 12:10:31

這兩行添加到sidenav風格：

position: absolute; 
    right: 0px; 
    top: 0px;

這將迫使它來推動它的權利。

它並不完全位於頂部，因爲您有一個頂部邊距。

這裏有一個的jsfiddle：http://jsfiddle.net/briggs_w/qvwp9wjg/

這是不使用引導功能的答案。不知道這是你想要的。

來源

2014-11-05 15:45:20

列不對齊。引導

回答

相關問題