bootstrop 3 栅格系统与面板组合排版

bootstrop 3 栅格系统与面板组合排版

一：内容

两种不同的排版方式：

1.垂直方向整齐排列，效果图如下：
​

代码如下：

<div class="row">
	<div class="col-md-8">  
		<div class="panel panel-default">
			<div class="panel-body">
				<h1>content</h1>
				<h1>content</h1>
				<h1>content</h1>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h1>content</h1>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<h1>content</h1>
				<h1>content</h1>
			</div>
		</div>

		<div class="panel panel-default">
            <div class="panel-body">
				<h1>content</h1>
			</div>
    	</div>
	</div>
    
</div>

2.水平方向整齐排列，效果图如下：

代码如下：

<div class="row">
	<div class="col-md-8">
		<div class="panel panel-default">
			<div class="panel-body">
				<h1>content</h1>
			</div>
		</div>
	</div>
     
	<div class="col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<h1>content</h1>
			</div>
		</div>
	</div>

	<div class="col-md-12">
		<div class="panel panel-default">
			<div class="panel-body">
				<h1>content</h1>
			</div>
		</div>
	</div>
</div>

二：解析

栅格系统——摆放的位置

面板——那个白色的板子

三：可能遇到的问题

1.面板内部元素靠近边框，问题如下图：

**答：**未在panel div盒子下加panel-body，panel-body有个padding可以使内部元素与外界隔离开一点

代码演示：

# 错误
<div class="panel panel-default">
	<h1>content</h1>
</div>


# 正常
<div class="panel panel-default">
	<div class="panel-body">
		<h1>content</h1>
	</div>
</div>

2：面板在同一row下大小不一，问题如下图：

**答：**这是因为左右两个面板都套在col-md-xxxx下，栅格系统及面板都是由内部元素的高度撑起来的。

比如左边有4个content，那么左边面板高度就是4个content元素的高度和。右边同理，则是2个content元素的高度和

而row这个div，则是由最大的那个决定他的高度

解决：在panel的div里定一个高度即可。代码如下：

<div class="row">
	<div class="col-md-8">
		<div class="panel panel-default" style="height:300px;"> # 固定高度
			<div class="panel-body">
				<h1>content</h1>
				<h1>content</h1>
				<h1>content</h1>
				<h1>content</h1>
			</div>
        </div>
	</div>
    
	<div class="col-md-4">
		<div class="panel panel-default" style="height:300px;"> # 固定高度
			<div class="panel-body">
				<h1>content</h1>
				<h1>content</h1>
			</div>
		</div>
	</div>
</div>