由于内容溢出， Bootstrap 网站无法移动的响应

ubof19bj  于 7个月前  发布在  Bootstrap
关注(0)|答案(3)|浏览(63)

我是Web开发新手。目前，我正在建立一个bootstrap网站。我的网站在桌面模式下运行良好。但在移动的视图中，一些引导列溢出，并在移动屏幕中创建垂直白色。因此，检查Chrome开发工具，我发现，如果我能够取消勾选

.row {
  margin-right: calc(var(--bs-gutter-x)/ -2);
  margin-left: calc(var(--bs-gutter-x)/ -2);
}

我有能力解决我的问题。所以我设置了我的CSS文件行值：

.row { 
  margin-left: 0%;
  margin-right: 0%;
}

但这段代码不会在浏览器上执行。
这是我的问题img

这是Chrome检查工具解决方案

此代码在codeply在线编辑器移动的版上运行良好。但不是在真实的的手机和Chrome开发工具中。
这是我的项目
https://www.codeply.com/p/mTCzjeZu7T

twitter-bootstrap

3条答案

按热度按时间
ejk8hzay

ejk8hzay1#

我已经用适当的网格结构重新构造了你的html代码。额外空间的根本原因可能是div之间的非结构化行类。还必须删除#title类填充以删除额外的空格。请参考片段。

body{ 
    
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;}


.h1{
    font-family: 'Black Ops One', cursive; ;
  }
h1{
      font-family: 'Black Ops One', cursive;
  }
  
h2{
      font-family: 'DM Serif Text', serif;
  }
  

/*.row{*/
/* margin-left: 0%;*/
/* margin-right: 0%;*/
/*}*/

#title{
 background-color:#F8F5F1;
 /* padding: 1% 1%; */

}

.title-image{
    height: 100%;
    width: 100%;
    padding-right: 10%;
    padding-top: 10%;
    padding-bottom: 10%;

}

.name{
    font-size: 5rem;
    font-weight: 800;
    padding-right: 2%;
    padding-top: 30%;
}

/* menu bar */
.lg-bar{
    background-color: black;
    padding: 1% 5%;
}

.n2{
    padding: 0 18px;
    font-size: 2rem;
}

/* .dn1{
    background-color: black;
    padding: 1% 3%;
} */
.nv{
    background-color: black;
    padding: 3% 4%;
}
.dnb{
  padding: 4% 4%;
}

.b1{
 font-family: 'Black Ops One', cursive; 
 

}

.dni{
    color: white;
    font-family:'Black Ops One', cursive;
    font-size: 1.5rem;
    text-align: center;
    background-color: black;
    padding-top: 1%;
    margin-top: 3%;

}

.pn{
    font-family: 'Black Ops One', cursive;
}

/* new release */
.new1{
    text-align: center;
    padding-bottom: 3%;
    padding-top: 3%;
    font-size: 4rem ;
    margin-bottom: 0%;
    
}

.new{
    text-align: center;
    padding-bottom: 3%;
    padding-top: 3%;
    font-size: 4rem ;
    background-color: whitesmoke;
    margin-bottom: 0%;
}



.new-col1{
   padding: 1%
}

.new-img{
    height:auto;
    width: 100%;
}


.new-col2{
    padding: 1%;
    background-color: #B0C4DE;
    background-image: linear-gradient(#3D7EAA,#FFE47A);
}

.new-date{
    text-align: center;
    font-family: 'Black Ops One', cursive;
    padding-top: 6%;
    
}

.new-tag{
    color: white;
    text-align: left;
    font-size: 7rem;
    font-weight:500;
    padding-left: 5%;
}
.new-tag-sp{
    font-size: 6.5rem;
    color: white;
    text-align: left;
    font-weight:500;
    padding-left: 5%;
}
.new-music1{
   margin: 3% 1% 3% 6%;
}

.new-p{
    padding-left : 6%;
    color: white;
    font-size: 1rem;
}

.ab{
    background-color: teal;
}

.ab-im-b {
    background-color:#F8F5F1;
    background-image: linear-gradient(#F8F5F1,#bfe9ff);
}

.ab-im{
    width: 100%;
    height: auto;
    
    margin-right: 0%;
}

.ab-tx1{
 background-color: #D3D3D3;
 padding: 3% 1%;
}
.ab-tx1:hover{
background-color: #6dd5ed;
}

.ab-tx2{
 background-color: #808080;
 padding: 3% 1%;
}
.ab-tx2:hover{
    background-color: #264566;
}

.ab-tx3{
 background-color:  #D3D3D3;
 padding: 3% 1%;
}
.ab-tx3:hover{
    background-color: #D7C2AD;
}
.ab-tx4{
 background-color:  #808080;
 padding: 3% 1%;
}
.ab-tx4:hover{
    background-color: #753a88;
}
.ab-bu{
    outline-color: black;
    background-color: cornsilk;
    text-align: center;
    margin-left: 6% ;
    margin-right: 6%;
    margin-bottom: 3%;
    
}

.ab-tx{
 color: white;
 font-family: 'Rubik', sans-serif;
 font-size: 7rem;
 margin-top: 20%;
 margin-left: 6%;
 margin-right: 6%;

}
.ab-tx-sp{
    color: white;
 font-family: 'Rubik', sans-serif;
 font-size: 7rem;
 margin-top: 20%;
 margin-left: 6%;
 margin-right: 6%;
}

.ab-p{
color: white;
font-family: 'Rubik', sans-serif;
font-size: 1.8rem;
margin-left: 6%;
margin-right: 6%;
}


/* .brand */
#brand{
    background-color: whitesmoke;
    padding: 3% 2%;
}

.girl2{
    width: 100% ;
    height: auto;
    text-align: center;
}

.news{
    padding-bottom:0%;
}
.brand-img{
    padding-top: 0%;
    padding-bottom: 0%;
    width: 100%;
    height: auto;
    
    
}

.thoughts{
    text-align: center;
    margin: 3% 10%;
}
.t-h2{
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 0.3rem;
    margin-bottom: 4%;
}

.t-h4{
    font-size: 2.4rem;
}

.t-h42{
    margin-bottom: 1%;
    font-weight: bold;
}

/* follow */
#follow{
    background-color: black;
    padding: 5% 3%;
    text-align: center;
    

}

.icon{
   
    color: white;
    background-color: black;
    margin-top: 5%;
    margin-bottom: 5%;
  
}
.icon:hover{
    color:white
}

/* footer */

#footer{
    background-color: black;
    text-align: center;
    color: whitesmoke;
    font-size: 1rem;
    padding-bottom: 2%;
    
}
    
@media (min-width:150px) and (max-width:298px){
    body{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;}

    .name{
        font-size: 2rem;
        text-align: center;
        padding-top: 0%;
    }
    
    .new1{
        font-size: 2rem;
    }

    .new-img{
        padding: 0% 3% 3% 3%;
    }

    .new-date{
        font-size: 1rem;
    }

    .new-tag{
        font-size: 3rem;

    }

    .new-tag-sp{
        font-size: 3rem;
    }

    .new{
        font-size: 2rem;
    }

    .ab-tx{
        font-size: 3rem;
    }

    .ab-tx-sp{
        font-size: 3rem;
    }

    .ab-p{
        font-size: 2rems;
    }

    .t-h2{
        font-size: 3rem;
        padding: 3% 0%;
    }

    .t-h4{
        font-size: 1rem;
    }
    
}

@media (min-width:300px) and (max-width:600px) {

    body{ 
    
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;}
    

    .title-image{
     padding-top: 30%;
    }

    .name{
        padding-top: 1%;
        font-size: 2.5rem;
        text-align: center;
        padding-left: 0%;
        padding-right: 0%;
        margin: 0%;
    }

    .new1{
        font-size: 4rem;
        padding:3% 2%;
    }
    
    .new-img{
        padding-bottom: 5%;
        padding-right: 2%;
        padding-left: 2%;
        margin: 0%;
    }

    .new-tag{
        font-size: 5rem;
        
    }
    .new-tag-sp{
        font-size: 4rem;
    }
    
    .new-row{
       padding-bottom: 0%;
       margin-bottom: 0%;
    }

    .new-img{
        padding-right: 1%;
        padding-left: 0%;
     }

    #albums{
        padding-bottom: 0%;
    }

    .ab-tx{
        font-size: 5rem;
    }

    .ab-tx-sp{
        font-size: 3.8rem;
    }

    .ab-p{
        font-size: 1.6rem;
    }

    .ab-bu{
        padding-top: 2%;
        margin-bottom: 15%;
    }


    .t-h2{
        font-size: 3rem;
        text-align: center;
        padding: 3% 0%;
        font-weight: bold;
    }

    .t-h4{
        font-size: 1.5rem;
        padding-bottom: 1%;
        
    }

    .thoughts{
        padding: 12% 0%;
    }

   

    #follow{
        padding-top: 10%;
    }
}

@media (min-width:600px) and (max-width:900px){
    body{ 
    
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;}
    

    .name{
       text-align: center;
       margin-top: 0%;
       padding-top: 0%;
       padding-bottom: 5%;
    }

    .new-img{
       padding-right: 1%;
       padding-left: 0%;
       padding-bottom: 3%;
    }

    .ab-tx1 {
        padding-bottom: 12%;
    }

    .ab-tx2 {
        padding-bottom: 12%;
    }

    .ab-tx3 {
        padding-bottom: 12%;
    }

    .ab-tx4 {
        padding-bottom: 12%;
    }

    .thoughts{
        padding: 20% 0%;
    }

    .t-h2{
        padding-bottom: 3%;
    }

    .t-h42{
        padding-top: 3%;
    }

    #follow{
        padding-top: 6%;
    }
 
}



@media (min-width:995px) and (max-width:1500px){
 .name{
    font-size: 3.4rem;
    text-align: center;
 }

 .thoughts{
    padding: 20% 0%;
}

.t-h42{
    padding-top: 3%;
}

.ab-tx-sp{
    font-size: 5rem;
}

.news{
padding-bottom: 0%;
}

.brand-img{
    padding-top: 3%;
}

#follow{
    padding-top: 12%;
}

}



@media (min-width:900px) {

    body{ 
    
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
    

    #toTopBtn {
        position: fixed;
        bottom: 26px;
        right: 39px;
        z-index: 98;
        padding: 21px;
        background-color:gray;
        border-radius: 8px;
       
    }
    
    .js .cd-top--fade-out {
        opacity: .5
    }
    
    .js .cd-top--is-visible {
        visibility: visible;
        opacity: 1
    }
    
    .js .cd-top {
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s, visibility .3s, background-color .3s
    }
    
    .cd-top {
        position: fixed;
        bottom: 20px;
        bottom: var(--cd-back-to-top-margin);
        right: 20px;
        right: var(--cd-back-to-top-margin);
        display: inline-block;
        height: 40px;
        height: var(--cd-back-to-top-size);
        width: 40px;
        width: var(--cd-back-to-top-size);
        box-shadow: 0 0 10px rgba(0, 0, 0, .05) !important;
        background: url(https://res.cloudinary.com/dxfq3iotg/image/upload/v1571057658/cd-top-arrow.svg) no-repeat center 50%;
        background-color: hsla(5, 76%, 62%, .8);
        background-color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.8)
    }
    
    .height {
        height: 3000px
    }

   
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <!-- favicon -->
    <link rel="icon" href="favicon-96x96.png">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=DM+Serif+Text&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
    <link href="main.css" rel="stylesheet">

    <script src="https://kit.fontawesome.com/3d7b617097.js" crossorigin="anonymous"></script>

    <title>The Muscian</title>

</head>

<body>
<div class="container-fluid">
    <div class="row">
        <a href="#" id="toTopBtn" class="cd-top text-replace js-cd-top cd-top--is-visible cd-top--fade-out"
        data-abc="true"></a>

        <!-- <div class="d-lg-none d-xl-block d-xl-none dn1">
        
        </div> -->

        <section id="title">

            <!-- title -->
            <div class="row">
                <div class="col-lg-6">
                    <img class="title-image" src="images/titleimage.png" alt="">
                </div>
                <div class="col-lg-6">

                    <!-- <h1 class="name">Sadeesha Prabhashana Music</h1> -->

                </div>
            </div>

        </section>
    </div>
    <div class="row">
        <!-- lg menu bar -->
        <div class="lg-bar  d-none d-lg-block   ">

            <nav class="navbar navbar-expand-lg navbar-dark menu-bark pn">
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav mx-auto" style="font-size: 20px">
                        <li class="nav-item item n2">
                            <a class="nav-link" href="#new-release">New Release</a>
                        </li>
                        <li class="nav-item item n2">
                            <a class="nav-link" href="#albums">Albums</a>
                        </li>
                        <li class="nav-item item n2">
                            <a class="nav-link" href="#brand">Studio</a>
                        </li>
                        <li class="nav-item item n2">
                            <a class="nav-link" href="#follow">Follow</a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>
    </div>
    <div class="row" id="new-release">
        <!-- new release -->
        <div class="col-lg-12">
            <h1 class="new1">New Release</h1>
        </div>
        <div class="col-lg-6 new-col1">
            <img class="new-img" src="images/new.png" alt="">
        </div>
        <div class="col-lg-6 new-col2">
            <h4 class="new-date">release on 20/06/2021</h4>
            <h2 class="new-tag">Now</h2>
            <h2 class="new-tag-sp">Available</h2>
            <h2 class="new-tag">On</h2>
            <a href="https://open.spotify.com/album/2eIM3hAd3p96AxJclhJM9Y" target="_blank">
                <button type="button" class="btn btn-light btn-lg new-music1"><i class="fab fa-spotify"></i>
                    Spotify
                </button>
            </a>
            <a href="https://www.deezer.com/en/album/186867412" target="_blank">
                <button type="button" class="btn btn-light btn-lg new-music2"> <i class="fab fa-deezer"></i>
                    Deezer
                </button>
            </a>

            <p class="new-p">#Alone Chill Play Now</p>
        </div>
    </div>
    <div class="row" id="albums">
        <div class="col-lg-12">
            <h1 class="new">Albums</h1>
        </div>
        <div class="col-lg-6 ab-im-b ">
            <img class="ab-im" src="images/4.png" alt="">
        </div>
        <div class="col-lg-6 ab-tx1">
            <h3 class="ab-tx">Sences</h3>
            <p class="ab-p">Pity those who don't feel anything at all.</p>
            <a href="https://open.spotify.com/album/1S3BnsQgmeWUBugQAvTZw1" target="_blank">
                <button type="button" class="btn btn-light btn-lg ab-bu"><i class="fas fa-headphones-alt"></i> Play
                    Now
                </button>
            </a>

        </div>

        <div class="col-lg-6 ab-tx2">
            <h3 class="ab-tx">Alone Chill</h3>
            <p class="ab-p">Chill out, relax and have an open mind.</p>
            <a href="https://open.spotify.com/album/2eIM3hAd3p96AxJclhJM9Y" target="_blank">
                <button type="button" class="btn btn-light btn-lg ab-bu"><i class="fas fa-headphones-alt"></i> Play
                    Now
                </button>
            </a>
        </div>

        <div class="col-lg-6 ab-im-b  ">
            <img class="ab-im" src="images/3.png" alt="">
        </div>

        <div class="col-lg-6 ab-im-b  ">
            <img class="ab-im" src="images/2.png" alt="">
        </div>

        <div class="col-lg-6 ab-tx3">
            <h3 class="ab-tx-sp">December</h3>
            <p class="ab-p">To appreciate the beauty of a snowflake it is necessary to stand out in the cold.</p>
            <a href="https://open.spotify.com/album/6OTh7heKygbXOWavxM2xvM" target="_blank">
                <button type="button" class="btn btn-light btn-lg ab-bu"><i class="fas fa-headphones-alt"></i> Play
                    Now
                </button>
            </a>

        </div>

        <div class="col-lg-6 ab-tx4 ">
            <h3 class="ab-tx">Secret Noiser</h3>
            <p class="ab-p">True merit, like a river, the deeper it is, the less noise it makes.</p>
            <a href="https://open.spotify.com/album/45YkxGBsrV9HP7fimQh4pm" target="_blank">
                <button type="button" class="btn btn-light btn-lg ab-bu"><i class="fas fa-headphones-alt"></i> Play
                    Now
                </button>
            </a>
        </div>

        <div class="col-lg-6  ab-im-b ">
            <img class="ab-im" src="images/1.png" alt="">
        </div>
           
            <!-- <h3>Lonely</h3>
            <img src="images/4.png" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper nisl vitae laoreet viverra.
                Proin vestibulum lacinia diam at gravida.
            </p>
            <h4>on air</h4>
    
            <h3>Alone Chill</h3>
            <img src="images/3.png" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper nisl vitae laoreet viverra.
                Proin vestibulum lacinia diam at gravida.
            </p>
            <h4>on air</h4>
    
            <h3>December</h3>
            <img src="images/2.png" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper nisl vitae laoreet viverra.
                Proin vestibulum lacinia diam at gravida.
            </p>
            <h4>on air</h4>
    
            <h3>December</h3>
            <img src="images/1.png" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper nisl vitae laoreet viverra.
                Proin vestibulum lacinia diam at gravida.
            </p>
            <h4>on air</h4> -->
    
            <!-- </section>
    
        listen on
        <section id="listen">
            <h1>Streaming On</h1>
    
            <img src="" alt="">
            <button type="button">Spotify</button>
    
            <img src="" alt="">
            <button type="button">Deezer</button>
    
            <img src="" alt="">
            <button type="button">Youtube</button>
    -->
        
        <!-- brand -->
        
    </div>
    <div class="row" id="brand">
        <div class="col-12">
            <h1 class="new">Studio</h1>
        </div>
        <div class="col-lg-5 girl">
            <img  class="girl2" src="images/brand-cp-isuru-akalanka.png" alt="">
          
        </div>

        <div class="col-lg-7 ">
            <img class="brand-img" src="images/P.png" alt="">
        </div>
    </div>
    <div class="row thoughts">
        <div class="col-12">
            <h2 class="t-h2">Thoughts</h2>
            <h4 class="t-h4">
                "Music is the great uniter. An incredible force.
                Something that people who differ on everything and anything else can have in common."
            </h4>
            <h4 class="t-h42">..Sarah Dessen</h4>
        </div>
    </div>
    <div class="row" id="follow">
        <!-- contact me -->

        <div class="col-12 f-r" >
           
                <a class="icon col-lg-3 col-md-6" href="http://www.facebook.com" target="_blank">
                    <div><i class="fab fa-facebook fa-5x"></i></div>
                </a>
                <a class="icon col-lg-3 col-md-6" href="http://wwww.twitter.com" target="_blank">
                    <div><i class="fab fa-twitter fa-5x"></i></div>
                </a>
                <a class="icon col-lg-3 col-md-6" href="http://www.instagram.com" target="_blank">
                    <div><i class="fab fa-instagram fa-5x"></i></div>
                </a>
                <a class="icon col-lg-3 col-md-6" href="http://www.youtube.con" target="_blank">
                    <div><i class="fab fa-youtube fa-5x"></i></div>
                </a>
                <!-- <div class="col-lg-3 col-md-3 col-sm-6 icon"></div> -->
        </div>
        <div class="col-12" id="footer">
        <!-- footer -->
            <p>© Copyright 2021</p>
            <p>created by Isuru Akalanka</p>
        </div>

    </div>
</div>
    

    



    


      

        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
            integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
            crossorigin="anonymous"></script>

        <script src="index.js"></script>


 </body>
 </html>
赞(0）分享  回复(0）举报  7个月前
67up9zun

67up9zun2#

无论何时使用row类，都要确保同时包含m-0类。这样做应该有助于解决您的问题。

赞(0）分享  回复(0）举报  7个月前
frebpwbc

frebpwbc3#

我通过将gs-0类标记添加到引导列填充中解决了这个问题。这从我的网站中删除了默认的填充，以对齐容器而不会溢出。
当我试图找到这个问题的答案时，我发现大多数时候这个垂直滚动条显示在浏览器中是因为div溢出。这种情况在使用图像时经常发生。如果你的图像溢出，你可以简单地添加图像类到下面的代码。

img{
      width:100%;
      height:auto;  
     }

此外，你可以尝试overflow-x: hidden;这也是从网站上删除垂直滚动条。但在我的例子中，这还不够，因为在移动的视图中，我的一些引导列溢出了。所以我不得不删除他们的默认填充。另外，确保添加viewport Meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

另一件事是用.container .container-fluid Package 你的div。但是这个.container-fluid也有一个默认的padding。如果你想删除这个填充，你可以简单地添加p-0。这是我从中学到的。

赞(0）分享  回复(0）举报  8个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com