grid.css

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
}

.container {
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}

.container-fluid {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.row:after {
	content: "";
	clear: both;
	display: block;
}

[class^="col-"] {
	float: left;
	width: 100%;
}


/* 桌上型平板與小螢幕 螢幕限制 小於等於 768px 小於等於 991px*/

@media screen and ( min-width:768px) and ( max-width:991px) {
	.col-sm-1 {
		width: calc(100% * 1 / 12);
	}
	.col-sm-2 {
		width: calc(100% * 2 / 12);
	}
	.col-sm-3 {
		width: calc(100% * 3 / 12);
	}
	.col-sm-4 {
		width: calc(100% * 4 / 12);
	}
	.col-sm-5 {
		width: calc(100% * 5 / 12);
	}
	.col-sm-6 {
		width: calc(100% * 6 / 12);
	}
	.col-sm-7 {
		width: calc(100% * 7 / 12);
	}
	.col-sm-8 {
		width: calc(100% * 8 / 12);
	}
	.col-sm-9 {
		width: calc(100% * 9 / 12);
	}
	.col-sm-10 {
		width: calc(100% * 10 / 12);
	}
	.col-sm-11 {
		width: calc(100% * 11 / 12);
	}
	.col-sm-12 {
		width: calc(100% * 12 / 12);
	}
}


/* 桌上型電腦螢幕 螢幕限制 大於等於 992px */

@media screen and ( min-width:992px) {
	.col-md-1 {
		width: calc(100% * 1 / 12);
	}
	.col-md-2 {
		width: calc(100% * 2 / 12);
	}
	.col-md-3 {
		width: calc(100% * 3 / 12);
	}
	.col-md-4 {
		width: calc(100% * 4 / 12);
	}
	.col-md-5 {
		width: calc(100% * 5 / 12);
	}
	.col-md-6 {
		width: calc(100% * 6 / 12);
	}
	.col-md-7 {
		width: calc(100% * 7 / 12);
	}
	.col-md-8 {
		width: calc(100% * 8 / 12);
	}
	.col-md-9 {
		width: calc(100% * 9 / 12);
	}
	.col-md-10 {
		width: calc(100% * 10 / 12);
	}
	.col-md-11 {
		width: calc(100% * 11 / 12);
	}
	.col-md-12 {
		width: calc(100% * 12 / 12);
	}
}