【row的宽度没有沾满整个container _布局】

row的宽度没有沾满整个container
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
布局
详细描述
截图
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <style pyte="txrt/css">
    html{
    font-size: 312.5%;
}
body{
    font-size: initial;
}
ul{
    margin: 0;
}

/* header眉页 */
.padding-right{
    padding-right: 0;
}
.right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0;
}
.service{
    line-height: .5rem;
    font-size: .14rem;
    color: #29B078;
}
.weixin{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    margin-right: .19rem;
    background: url(picture/task-css8.png) no-repeat 0 0;
}
.qq{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    margin-right: .19rem;
    background: url(picture/task-css8.png) no-repeat 0 -.58rem;
}
.weibo{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    background: url(picture/task-css8.png) no-repeat 0 -1.3rem;
}

/*下拉 导航栏 */
.bg-green{
    background: #29B078;
}
.navbar{
    padding: 0;
}
.navbar-brand{
    margin-right: 0;
    font-size: 0;
}
.xiuzhenyuan{
    width: 3.5rem;
}
.navbar-toggler{
    padding: 0;
    margin: .25rem .75rem .25rem 0;
    border:none;
    outline: none !important;
    font-size: .5rem;
}
@media (max-width:767px){
    .navbar-nav{
        text-align: center;
    }
}


/* main主体 */
.picture-size{
    width: 100vw;
    height: 33vw;
}

    </style>


</head>
<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-6 padding-right">
                    <span class="service">客服热线：010-594-78634</span>
                </div>
                <div class="col-6  right">
                    <a class="weixin"></a>
                    <a class="qq"></a>
                    <a class="weibo"></a>
                </div>
            </div>
        </div> 


                        <nav class="navbar navbar-expand-md bg-green navbar-dark">
                                <div class="container">
                                        <div class="row">
                                            <div class="col-sm-12">
                                <a class="navbar-brand" href="#">
                                    <img class="xiuzhenyuan" src="picture/xiuzhenyuan.png">
                                </a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                                    <ul class="navbar-nav">
                                        <li class="nav-item">                      
                                            <a class="nav-link" href="#">首页</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">职业</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">推荐</a>
                                        </li>    
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">关于</a>
                                        </li>
                                    </ul>
                                </div> 
                            </div>
                        </div>
                    </div>
                   </div> 
                            </nav>

    </header>










    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
编辑于2024-04-26
时间排序
热门排序
[北京|结业弟子]JS-顾仁鹏
1

导航栏最好分开写，因为这里面封装涉及到了js才会出这种问题，把logo那行与导航栏分开写就不会出现这种莫名其妙的问题了。

查看全部>

编辑于2019-01-14
去第页