border属性，没有对齐如何解决？？-慕课网

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

来源：4-6 列的嵌套

web_東

2018-07-22 15:50

<!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>

写回答关注

1回答

Sandaydi: 2018-07-27 20:37:23

左右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;
}

效果如：

0 0

玩转Bootstrap（基础）

告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap

314546 学习 · 2275 问题

查看课程

相似问题

如何定制对齐方式

回答 2

没有对齐怎么回事？

回答 3

像这种IE6~8不支持的兼容性问题如何解决？

回答 2

border-responsive并没有

回答 3

两端对齐和左对齐有什么不一样？？

回答 3

打开慕课网App查看更多内容