부트스트랩 그리드 col 테두리선

부트스트랩 그리드 테두리선 주기
부트스트랩 col 테두리선

1 예시[ | ]

예제: http://zetawiki.com/ex/bootstrap/col-border.html

html

Copy

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
 
<style>
[class*="col-"] {
  padding: 8px;
  border: 1px solid gray;
  text-align: center;
}
</style>
 
<div class='row'>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-8'>너비8</div>
</div>
 
<div class='row'>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-4'>너비4</div>
</div>
 
<div class='row'>
  <div class='col-sm-6'>너비6</div>
  <div class='col-sm-6'>너비6</div>
</div>
 
<div class='row'>
  <div class='col-sm-12'>너비12</div>
</div>

2 같이 보기[ | ]