<!DOCTYPE?HTML>
<html>
<head>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1">
????<title>基本用法</title>
????<link?rel="stylesheet"?href="../bs-3.3.7/css/bootstrap.min.css">
????<style?type="text/css">
????????/*css屬性選擇器的寫法*/
????????[class|=col-md]{
????????????background:?#eeeeee;
????????????color:red;
????????????border:1px?solid?#0d638f;
????????????margin:?-1px?0px;
????????}
????</style>
</head>
<body>
<div?class="container">
????<div?class="row">
????????<div?class="col-md-8?col-md-push-4">col-md-8?push推</div>
????????<div?class="col-md-4?col-md-pull-8">col-md-4?pull拉</div>
????</div>
</div>
<div?class="container">
????<div?class="row">
????????<div?class="col-md-4">
????????????我是第一個(gè)
????????????<div?class="row">
????????????????<div?class="col-md-3">1</div>
????????????????<div?class="col-md-3">2</div>
????????????????<div?class="col-md-3">3</div>
????????????????<div?class="col-md-3">4</div>
????????????</div>
????????</div>
????????<div?class="col-md-8">
????????????我的里面嵌套一個(gè)
????????????<div?class="row">
????????????????<div?class="col-md-6">我是第二個(gè)</div>
????????????????<div?class="col-md-6">我是第二個(gè)</div>
????????????</div>
????????</div>
????</div>
</div>
</body>
</html>
2018-07-27
左右border疊加了，css樣式中添加上這兩句（當(dāng)然，答案不是唯一）
.row>.col-md-8,.row>.col-md-4>.row>.col-md-3,?.row>.col-md-8>.row>.col-md-6{ ????????border-left-width:?0; ??} .row>.col-md-4>.row>.col-md-3:last-child,?.row>.col-md-8>.row>.col-md-6:last-child{ ????????border-right-width:?0; }效果如：