Bootstrap 3 col浮动问题

Question

我试图得到这个：http://imgur.com/lJr41u7
目前我有这个：http://imgur.com/Hmvn8Ba

没有选择将它们分成两个容器，使用col-md-6，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row-fluid">
		<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
			<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
				<div class="imageContainerAnimated">
					<a href="#">
					   <img src="images/image.jpg">
						<div>Title</div>
					</a>	
				</div>
			</div>
			
			<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
				<div class="imageContainerAnimated">
					<a href="#">
					   <img src="images/image.jpg">
						<div>Title</div>
					</a>	
				</div>
			</div>
			
			<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
				<div class="imageContainerAnimated">
					<a href="#">
					   <img src="images/schmuck3.jpg">
					   <div>Title</div>
					</a>	
				</div>
			</div>
		</div>
		
		<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
			<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
				<div class="imageContainerAnimated">
					<a href="#">
					   <img src="images/image.jpg">
						<div>Title</div>
					</a>	
				</div>
			</div>
			
			<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
				<div class="imageContainerAnimated">
					<a href="#">
					   <img src="images/image.jpg">
						<div>Title</div>
					</a>	
				</div>
			</div>
			
			<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
				<div class="imageContainerAnimated">
					<a href="#">
					   <img src="images/schmuck3.jpg">
					   <div>Title</div>
					</a>	
				</div>
			</div>	
		</div>
	</div>	
</div>

My code:

    <div class="container">
	<div class="row-fluid">
		<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/schmuck3.jpg">
				   <div>Title</div>
				</a>	
			</div>
		</div>
		
		
		<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/schmuck3.jpg">
				   <div>Title</div>
				</a>	
			</div>
		</div>	
		

		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/schmuck3.jpg">
				   <div>Title</div>
				</a>	
			</div>
		</div>
		
		
		<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		
		<div class="col-md-6 col-sm-6 col-xs-6 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin">
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/image.jpg">
					<div>Title</div>
				</a>	
			</div>
		</div>
		
		<div class="col-md-3 col-sm-3 col-xs-3 removePaddingMargin" >
			<div class="imageContainerAnimated">
				<a href="#">
				   <img src="images/schmuck3.jpg">
				   <div>Title</div>
				</a>	
			</div>
		</div>
	</div>	
</div>

类removePaddingMargin删除填充边距
类imageContainerAnimated为容器中的图像设置动画，并提供100％的宽度。

非Bootsrap示例：https://jsfiddle.net/jea8ezny/