如何正确地将行与引导程序对齐

Question

我正在创建一个基本网站，并且在使用列对齐行时遇到问题。我有几排，似乎是因为排水沟将它们推向一边。我怎样才能使身体排成一列？我附上了代码和图片来展示正在发生的事情。

    .nav3{

	

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

			.red{
				color:$red;
			}

			.blue{
				color:$blue;
			}

			.green{
				color:$green;
			}

			.pink{
				color:$pink;
			}
		


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

				


			}

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

			p{
				margin:0;
			}
		
	}
}

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



  

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

    .row1Pics{

	height:300px;

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

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

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

	}
    }


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

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

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

    }

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


    <div class="row nav3">
    	<ul>
    		<li class="col-md-3 red text-center">I need <br> Help</li>
    		<li class="col-md-3 blue text-center">I need <br> Information</li>
    		<li class="col-md-3 green text-center">I want <br> to donate</li>
    		<li class="col-md-3 pink text-center">I want <br> to volunteer</li>
    	</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 ">
    
    	<div class="col-md-8">
    		<img class="img-responsive" src="http://lorempixel.com/780/300/sports">
    	</div>
    	<div class="col-md-4 grey">
    		<p class="text-center">
    			In order to offer help, we need your help. Consider becoming a partner
    			with us against Violence in the Bahamas.
    		</p>
    		<button class="text-uppercase center-block">Donate Today</button>
    	</div>
    
    </div>

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

</div>

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

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

Answer 1

你的列实际排成一行，它们“看起来”不对齐的原因是因为标准的Bootstrap列带有左和右列。右边填充15px。

这意味着当您将background-color: grey应用于列时，它会忽略填充。

我在这里为你做了一个例子： Bootstrap Columns padding example

Answer 2

所以你使用的是Bootstrap，我假设这个事实。 要对齐所有元素，请始终将其放在col-md-中，并使用所需的列数，请记住填充所有12列，以便自动对齐。

我看到你错过了旋转木马的col-md-。把它再次检查！