2016-03-11 82 views
1

我正在製作一個基本網站,並遇到將列與列對齊的問題。我有幾排,看起來像是因爲排水溝被推到一邊。我怎樣才能讓身體排列在一起?我附上了代碼和圖片以顯示發生了什麼。 enter image description here如何正確地將行與引導程序對齊

.nav3{ 
 

 
\t 
 

 
\t ul{ 
 
\t \t 
 
\t \t \t background-color:orange; 
 
\t \t \t overflow:auto; 
 

 
\t \t \t .red{ 
 
\t \t \t \t color:$red; 
 
\t \t \t } 
 

 
\t \t \t .blue{ 
 
\t \t \t \t color:$blue; 
 
\t \t \t } 
 

 
\t \t \t .green{ 
 
\t \t \t \t color:$green; 
 
\t \t \t } 
 

 
\t \t \t .pink{ 
 
\t \t \t \t color:$pink; 
 
\t \t \t } 
 
\t \t 
 

 

 
\t \t \t li{ 
 
\t \t \t \t font-size: 1.4em; 
 
\t \t \t \t float:left; 
 
\t \t \t \t list-style-type: none; 
 

 
\t \t \t \t 
 

 

 
\t \t \t } 
 

 
\t \t \t li:last-child{ 
 
\t \t \t \t border:0px; 
 
\t \t \t } 
 

 
\t \t \t p{ 
 
\t \t \t \t margin:0; 
 
\t \t \t } 
 
\t \t 
 
\t } 
 
} 
 

 
    footer{ 
 
    
 
    \t [class*="zocial-"]{ 
 
    \t \t color:orange; 
 
    \t \t font-size:2em; 
 
    \t } 
 
    
 
     background-color: $greyHeader; 
 

 

 

 
    
 

 
    .list1{ 
 
     \t list-style-type: none; 
 
     \t li{ 
 
     \t \t float:left; 
 
     \t } 
 
    
 
    
 
     } 
 
    
 
     .list2{ 
 
     \t list-style-type: none; 
 
     \t li{ 
 
     \t \t float:left; 
 
     \t } 
 
     } 
 
    
 
     .list3{ 
 
     \t list-style-type: none; 
 
     } 
 
    } 
 

 
    .row1Pics{ 
 

 
\t height:300px; 
 

 
\t p{ 
 
\t \t font-size:1.5em; 
 
\t \t color:white; 
 
\t \t padding:1em; 
 
\t } 
 

 
\t .grey{ 
 
\t \t background-color:grey; 
 
\t \t max-width:100%; 
 
\t \t 
 
\t } 
 

 
\t button{ 
 
\t padding:1.1em; 
 
\t border: 3px solid green; 
 
\t background-color:white; 
 
\t font-size:1.4em; 
 
\t margin-bottom:1.2em; 
 

 
\t } 
 
    } 
 

 

 
    .row2Pics{ 
 
    \t .col-md-4{ 
 
    \t \t background-color:grey; 
 
    \t } 
 
\t 
 
\t 
 

 
\t button{ 
 
\t \t padding:1.1em; 
 
\t \t border:3px solid blue; 
 
\t \t background-color:white; 
 
\t \t font-size:1.4em; 
 
\t \t margin-bottom:1.2em; 
 
\t } 
 

 
\t p{ 
 
\t \t color:white; 
 
\t \t font-size:1.4em; 
 
\t \t padding:1em; 
 
\t } 
 

 
    }
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <div class="row nav2"> 
 
\t <div class="col-md-12"> 
 
\t \t <p class=" heading text-right"> 
 
\t \t \t Need help? Call our 24 hr hotline 
 
\t \t </p> 
 
\t \t <p class="text-right number"> 
 
\t \t \t 328-0922 
 
\t \t </p> 
 
\t </div> 
 
</div> 
 

 

 
    <div class="row nav3"> 
 
    \t <ul> 
 
    \t \t <li class="col-md-3 red text-center">I need <br> Help</li> 
 
    \t \t <li class="col-md-3 blue text-center">I need <br> Information</li> 
 
    \t \t <li class="col-md-3 green text-center">I want <br> to donate</li> 
 
    \t \t <li class="col-md-3 pink text-center">I want <br> to volunteer</li> 
 
    \t </ul> 
 
    
 
    </div> 
 

 
    <!-- Carousel Start --> 
 
    
 
    <div ng-controller="carouselController"> 
 
     <div style="height: 405px"> 
 
     <uib-carousel interval="myInterval" no-wrap="noWrapSlides"> 
 
      <uib-slide ng-repeat="slide in slides" active="slide.active" index="slide.id"> 
 
      <img ng-src="{{slide.image}}" style="margin:auto;"> 
 
      <div class="carousel-caption"> 
 
       <h4>Slide {{slide.id}}</h4> 
 
       <p>{{slide.text}}</p> 
 
      </div> 
 
      </uib-slide> 
 
     </uib-carousel> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Carousel End --> 
 

 

 

 

 
    <div class="row row1Pics "> 
 
    
 
    \t <div class="col-md-8"> 
 
    \t \t <img class="img-responsive" src="http://lorempixel.com/780/300/sports"> 
 
    \t </div> 
 
    \t <div class="col-md-4 grey"> 
 
    \t \t <p class="text-center"> 
 
    \t \t \t In order to offer help, we need your help. Consider becoming a partner 
 
    \t \t \t with us against Violence in the Bahamas. 
 
    \t \t </p> 
 
    \t \t <button class="text-uppercase center-block">Donate Today</button> 
 
    \t </div> 
 
    
 
    </div> 
 

 
    <div class="row row2Pics"> 
 
    
 
    \t <div class="col-md-4"> 
 
    \t \t <p class="text-center"> 
 
    \t \t \t Knowledge is power. Get information about Domestic Violence and abuse 
 
    \t \t \t to how you can help youself or someone else. 
 
    \t \t </p> 
 
    \t \t <button class="text-uppercase center-block">Go To Resources</button> 
 
    \t </div> 
 
\t <div class="col-md-8"> 
 
\t \t <img class="img-responsive" src="http://lorempixel.com/780/300/business"> 
 
\t </div> 
 

 
</div> 
 

 
    <footer class="row"> 
 
    \t <ul class="col-md-4 list1"> 
 
    \t \t <li class="col-md-4">Donate</li> 
 
    \t \t <li class="col-md-4">Volunteer</li> 
 
    \t \t <li class="col-md-4">Contact Us</li> 
 
    \t </ul> 
 
    
 
    \t <ul class="col-md-5 list2"> 
 
    \t \t <li class="col-md-3 zocial-twitter"></li> 
 
    \t \t <li class="col-md-3 zocial-pinterest"></li> 
 
    \t \t <li class="col-md-3 zocial-youtube"></li> 
 
    \t \t <li class="col-md-3 zocial-instagram"></li> 
 
    \t </ul> 
 
    
 
    \t <ul class="col-md-3 list3"> 
 
    \t \t <li>Bahamas Crisis Center</li> 
 
    \t \t <li> P.O Box 44370</li> 
 
    \t \t <li>Nassau, Bahamas</li> 
 
    \t </ul> 
 
    </footer>

http://codepen.io/mroker/pen/bpeQWv?editors=1100

+0

,你給是不夠的 – AVI

+0

我剛纔添加的所有代碼該頁面的代碼。 – arsenalist

+1

Css太需要了。 – AVI

回答

1

您的列實際上是排隊的,他們「看起來」未對齊的原因是因爲標準Bootstrap列帶有左邊&右邊填充15px。

這意味着當您將background-color: grey應用到列上時,它將忽略填充。

我做了一個小例子你在這裏: Bootstrap Columns padding example

+0

好的非常感謝這個解釋。說得通。那麼我怎麼才能讓灰色來到一邊呢? – arsenalist

+2

@arsenalist您可以像在示例中那樣在列上應用背景,或者移除列上的填充。 –

0

所以,你正在使用引導,我認爲事實。 要對齊所有元素,請始終將其放在col-md-內,並填寫所需的列數,記得填寫所有12列,以便自動對齊。

我看到你錯過了輪播的col-md-。把它和再次檢查!

+0

當我把它放在旋轉木馬上會導致其他行不幸重疊。但這可能是我想要的旋轉木馬的問題。 – arsenalist

+0

此外,我所有的行都在一行內,每個div或元素都在一個col內。 – arsenalist