                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

border属性，没有对齐如何解决？？

<!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">
            我是第一个
            <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">
            我的里面嵌套一个
            <div class="row">
                <div class="col-md-6">我是第二个</div>
                <div class="col-md-6">我是第二个</div>
            </div>
        </div>
    </div>
</div>




</body>
</html>

web_東

2018-07-22

源自：玩转Bootstrap（基础） 4-6

关注问题我要回答

1501

操作

收起

1 回答

Sandaydi
2018-07-27

左右border叠加了，css样式中添加上这两句（当然，答案不是唯一）

.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;
}

效果如：