我正在製作一個基本網站,並遇到將列與列對齊的問題。我有幾排,看起來像是因爲排水溝被推到一邊。我怎樣才能讓身體排列在一起?我附上了代碼和圖片以顯示發生了什麼。 如何正確地將行與引導程序對齊
.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
,你給是不夠的 – AVI
我剛纔添加的所有代碼該頁面的代碼。 – arsenalist
Css太需要了。 – AVI