SOURCE

<div class="container-fluid">
	<div class="row">
		<div class="col">Bootstrap 自动布局</div>
		<div class="col">Bootstrap 自动布局</div>
		<div class="col">Bootstrap 自动布局</div>
	</div>
</div>

<h1></h1>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3">等宽响应式列</div>
		<div class="col-sm-3">等宽响应式列</div>
		<div class="col-sm-3">等宽响应式列</div>
		<div class="col-sm-3">等宽响应式列</div>
	</div>
</div>

<h1></h1>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-4">不等宽响应式列</div>
		<div class="col-sm-8">不等宽响应式列</div>
	</div>
</div>

<h1></h1>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">平板、桌面、大桌面显示器、超大桌面显示器</div>
		<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">平板、桌面、大桌面显示器、超大桌面显示器</div>
	</div>
</div>

<h1></h1>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
	</div>
	<div class="row">
		<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
		<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
	</div>
	<div class="row">
		<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
	</div>
</div>

.container>div>div:nth-child(even),.container-fluid>div>div:nth-child(even){
    background: sandybrown;
}

.container>div>div:nth-child(odd),.container-fluid>div>div:nth-child(odd){
    background: skyblue;
}