Question

我正在制作一个带有bootstrap的网站，但我遇到了问题。当我在我的一个div上使用宽度：100％时，背景颜色不会完全扩展到100％。它只扩大到90％左右（左边5％，右边5％显示身体背景颜色）。我赞赏任何帮助。

HTML：

$(this)

CSS：

<!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>Galaxy</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
</style>
<script>
    var sound = new Audio();
    sound.src = "rick.mp3";
 </script>
    </head>
        <body>
            <div id="theCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#theCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/galaxy3.jpg">
                        <div class="slide1"></div>
                        <div class="carousel-caption">
                            <div class="bannertext">
                                <h1>Santorodesign</h1>
                                <p>A website made by Michael</p>
                                <div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
                                <div class="mobileHide"> <button id="headerbutton-english">English</button></div>
                            </div>                              
                        </div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                    <img src="images/galaxy2.jpg">
                    <div class="carousel-caption">
                        <div class="bannertext2">
                            <h1>Explore the galaxy<h1>
                    </div>
                </div>          
            </div>

                <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a class="right carousel-control" href="#theCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span> 
                </a>            
            </div>
        </div>
        <div id="firstrow">
            <div class="planettext">
                Planets
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mercury.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/earth.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/venus.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mars.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mars</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/jupiter.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/saturn.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/uranus.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/neptune.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">

            </div>
                <div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div id="pluto">
                <div class="plutotext">
                    Poor Pluto
                </div>
                <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
                </div>
            </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

感谢您的时间。

Answer 1

确保在你的行星冥王星座中添加以下内容

                <div class="row"> /* EDIT*/
                <div id="pluto">
            <div class="plutotext">
                Poor Pluto
            </div>
            <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
            <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
            </div>
              </div>   /* EDIT */

此处CODEPEN回答

我注意到的一件事是，尽管您使用了自举网格系统，但您从未使用过bootstrap行类，这太棒了。你可以使用boostrap内置行类而不是你创建的所有这些类，这样会更好。因此，您的代码看起来很乱。

＆＃13;

html {
    margin: 0;
}
body {
    background: #DCDCDC;
    width: 100%;
    margin: 0;
}
.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 0px 0 0 0;
   width: 100%;
   text-align: center;
   color: black;
   position: relative;
}
#firstrow span {
    font-family: Impact, Impact5, Charcoal6, sans-serif;
    font-size: 1.3em;
}
#firstrow p {
    font-family: Helvetica,
}
@media all and (max-width: 2000px) {
    #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -90px;
         line-height: 40px;
    }
}
.planettext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 200px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #DCDCDC;
    font-weight: bold;
}
.plutotext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #D3D3D3;
    font-weight: bold;
    margin: 00;
}
#pluto {
    background-color: #D3D3D3;
    height: 550px;
    width: 100%;

}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
@media all and (max-width: 2000px) {
     #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -70px;
         line-height: 40px;
     }
}

@media all and (max-width: 1450px) {
    #headerbutton-nederlands {
        position: absolute;
        font-size: 14px;
        line-height: 30px;
        right: -55px;
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-nederlands {
        font-size: 13px;
        line-height: 25px;
        right: -55px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-nederlands {
        font-size: 10px;
        line-height: 20px;
        right: -40px;
    }
}
@media all and (max-width: 2000px) {
     #headerbutton-english {
         position: absolute;
         bottom: 0px;
         right: 100px;
         line-height: 40px;
     }
}

@media all and (max-width: 1450px) {
    #headerbutton-english {
        position: absolute;
        font-size: 14px;
        right: 80px;
        line-height: 30px
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-english {
        font-size: 13px;
        line-height: 25px;
        right: 50px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-english {
        font-size: 10px;
        line-height: 20px;
        right: 50px;
    }
}


.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
        margin-bottom: 20px;
    }


    .bannertext {
         font-size: 1.3em;
         line-height: 15px;
         position: relative;
    }
    .bannertext h1 {
        font-size: 2em;
    }
    .bannertext2 {
        font-size: 2em;
    }
 .mobileShow { display: none;}
 .mobileHide { display: inline;}
     /* Smartphone Portrait and Landscape */
    @media only screen
        and (max-device-width : 480px){
        .mobileShow { display: inline;}
        .mobileHide { display: none;}
        .planet img{
            height: 200px;
        }
        }
#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}

＆＃13;

<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>Galaxy</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
</style>
<script>
    var sound = new Audio();
    sound.src = "rick.mp3";
 </script>
    </head>
        <body>
            <div id="theCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#theCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/galaxy3.jpg">
                        <div class="slide1"></div>
                        <div class="carousel-caption">
                            <div class="bannertext">
                                <h1>Santorodesign</h1>
                                <p>A website made by Michael</p>
                                <div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
                                <div class="mobileHide"> <button id="headerbutton-english">English</button></div>
                            </div>                              
                        </div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                    <img src="images/galaxy2.jpg">
                    <div class="carousel-caption">
                        <div class="bannertext2">
                            <h1>Explore the galaxy<h1>
                    </div>
                </div>          
            </div>

                <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a class="right carousel-control" href="#theCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span> 
                </a>            
            </div>
        </div>
        <div id="firstrow">
            <div class="planettext">
                Planets
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mercury.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/earth.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/venus.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mars.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mars</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/jupiter.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/saturn.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/uranus.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/neptune.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">

            </div>
                <div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  
                  <div class="row">
                    <div id="pluto">
                <div class="plutotext">
                    Poor Pluto
                </div>
                <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
                </div>
                  </div>  
                  
                  
            </div>
          
          
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

＆＃13;

Answer 2

我假设您希望#pluto为100％？

YouTube.Search.List query;
query = youTube.search().list("id, snippet");
query.setKey(YOUR_API_KEY);
query.setType("video");
query.setFields("items(id/videoId,snippet/title,snippet/description,snippet/thumbnails/default/url)");
query.setQ(search keywords);
SearchListResponse response = query.execute();
List<SearchResult> results = response.getItems();

您可以使用开发工具来检查父div的宽度和填充：。我猜这个问题就在那里。

100％宽度未完全扩展到100％

2 个答案: