如何删除右侧的空白区域？

时间：2016-02-25 14:25:56

标签： html css twitter-bootstrap

在移动设备上查看时，我网站右侧会显示一个空格。

这就是我所做的。

HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BUDWEISER</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/zoombox.css" media="screen">
    <link href="http://vjs.zencdn.net/5.7.1/video-js.css" rel="stylesheet">

    <link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>
<body role="document">


    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=956935597733326";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>


        <div class="container-fluid" >
            <div class="row">
                <div class="header" style="background: #c41a30;"> <!-- the top red section -->
                    <div class="logo-small">
                            <img src="images/drink-responsibly.png">
                    </div>
                    <div class="logo-small-retina">
                            <img src="images/low-res/drink-responsibly-retina.png" id="top-right-retina">
                    </div> 
                    <div class="main-logo">
                        <img src="images/budweiser.png">
                    </div>
                    <div class="main-logo-retina">
                        <img src="images/low-res/budweiser-retina.png">
                    </div>
                    <div class="dream-header">
                        <img src="images/dream-header.png">
                    </div>
                    <div class="dream-header-retina">
                        <img src="images/low-res/dream-header-retina.png">
                    </div>
                    <div class="map">
                        <div class="ireland">
                            <img src="images/ireland-map.png">
                        </div>
                        <div class="rollOver">
                            <img src="images/spacercircle.png">
                            <div class="sandra">
                                <a class="zoombox zgallery1" w250 h250 title="Dream Big" href="video/dream-job.mp4">
                                    <img src="images/sandra-icon.png"  alt="dream job video" />
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="map-retina">
                        <div class="ireland-retina">
                            <img src="images/low-res/ireland-map-retina.png">
                        </div>  
                        <div class="rollOver">
                            <img src="images/spacercircle.png">
                            <div class="sandra">
                                <a class="zoombox zgallery1" w250 h250 title="Dream Big" href="video/dream-job.mp4">
                                    <img src="images/sandra-icon.png"  alt="dream job video" />
                                </a>
                            </div>
                        </div>  
                    </div>      
                    <div class="text-map">
                        <img src="images/text-below-map.png">
                    </div>

                    <div class="text-map-retina">
                        <img src="images/low-res/text-below-map-retina.png">
                    </div>
            </div>

            <div class="iradio">
                <div class="iradio-logo">
                        <img src="images/iradio-logo.png">
                </div>
                <div class="iradio-logo-retina">
                        <img src="images/low-res/iradio-logo-retina.png">
                </div>
                <div class="garry-text">
                        <img src="images/garry.png">
                </div>
                <div class="garry-text-retina">
                        <img src="images/low-res/garry-retina.png">
                </div>
            </div>

            <div class="garry">
                <div class="garrybg">
                        <div class="centerVideo">
                        <video id="garry-vid" class="video-js vjs-big-play-centered" controls preload="auto" style="width:100%; height:auto;"
                                   data-setup='{"fluid": true}'>
                                    <source src="video/dream-job.mp4" type='video/mp4'>
                                    <p class="vjs-no-js">
                                      To view this video please enable JavaScript, and consider upgrading to a web browser that
                                      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                    </p>
                          </video>
                        </div>
                </div>
<!--                <div class="garrybg-retina">
                        <video id="garry-vid-retina" class="video-js" controls preload="auto" width="120" height="78"
                                   data-setup=" {fluid: true}">
                                    <source src="video/dream-job.mp4" type='video/mp4'>
                                    <p class="vjs-no-js">
                                      To view this video please enable JavaScript, and consider upgrading to a web browser that
                                      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                    </p>
                        </video>
                        <img src="images/low-res/garry-bg-retina.png">
                </div> -->
            </div>
            <div class="enter">
                <div class="enter-text">
                    <img src="images/enter.png">    
                </div>  
                <div class="enter-text-retina">
                    <img src="images/low-res/enter-retina.png">
                </div>  
            </div>  

            <div class="win" style="background: #c41a30;">
                <div class="chancetowin">
                    <img src="images/your-chance.png">  
                </div>  
                <div class="chancetowin-retina">
                    <img src="images/low-res/your-chance-retina.png">
                </div>  
            </div>

            <div class="form-group">
                <div class="btn-submit">
                    <form action="action_page.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
                    <textarea class="form-control" rows="5" cols="150" id="comment" placeholder="SHARE YOUR DREAM!"></textarea>

                    <div class="fb-share-button" data-href="http://localhost/projects/budweiser/" data-layout="button"></div>

                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://localhost/projects/budweiser/" data-text="Check this Out" data-hashtags="DreamBig">Tweet</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
                    </script>

                    <input type="image" src="images/submit-button.png" id="btn">
                    </form>
                </div>

            </div>
            <div class="social" style="background: #c41a30;">
                <img src="images/dream-social.png" id="share">
            </div>
            <div class="social-retina" style="background: #c41a30;">
                <img src="images/low-res/dream-social-retina.png">
            </div>
            <div class="footer">
                <iframe src="https://player.vimeo.com/video/156422073" class="footer-vid" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

                <!-- <iframe src="https://player.vimeo.com/video/156422073" class="footer-vid-retina" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> -->

            </div>
            </div>

        </div>  


                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
                <script type="text/javascript" src="js/main.js"></script>
                <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script><!-- If you'd like to support IE8 -->
                <script src="http://vjs.zencdn.net/5.7.1/video.js"></script>
                <script type="text/javascript" src="js/zoombox.js"></script>
                <script type="text/javascript">
              $(function() {
                $('a.zoombox').zoombox();
              });
                </script>
</body>
</html>

CSS 

.row{

    margin-right: 0px;
    margin-left: 0px;
}



.container-fluid{
    padding-right: 0px;
    padding-left: 0px;
   }
.header{
    width: 100%;
    height: 100%;
    position: relative;

}
        .logo-small img{ 
            margin: 0 auto;
            width: 30%;
            height: 10%;
            padding-top: 30px;
            margin-left: 60px;
        }


        .logo-small-retina {
            margin: 0 auto;
            display: none;
        }

        .main-logo{
            position: relative;
            text-align: center;
            margin-bottom: 50px;
        }

        .main-logo img{
            width: 15%;
            height: 10%;

        }
        .main-logo-retina{

            display: none;
        }

        .dream-header{
            position: relative;
            text-align: center;
            margin-left: -40px;
        }

        .dream-header img{
            width: 40%;
            height: 10%;
        }

        .dream-header-retina{
            display: none;
        }

        .map{

            width: 100%;
            height: 100%;
        }

        .map-retina{
            display: none;
        }

        .ireland{

            position: relative;
            text-align: center;
            margin-top: 65px;
        }

        .ireland img {
            position: relative;
            width: 40%;
            height: 10%;
            margin-top: -4%;
        }

        .ireland-retina{

            display: none;
        }


        .sandra img {
        /*display: block;
        position: relative;
        width: 105px;
        margin-top: -50%;
        margin-left: 14%;*/
    }
        .rollOver {
            display: block;
            width: 2%;
            position: relative;
            margin-left: 47.69%;
            margin-top: -22.5%;
        }
        .sandra{
            display: none; 
            position: relative;
            width: 250%;
            margin-top: -790%;
            margin-left: -176%;
}
        }


        .sandra img {
            display: block;
            width: 100%;
            position: relative;

        }




        .text-map{
            position: relative;
            text-align: center;
            margin-top: 20%;
            margin-bottom: 5%;
        }

        .text-map img {
            position: relative;
            width: 40%;
            height: 10%;
            display: block;
            margin-top: 24%;
            margin-left: 27%;
            margin-right: 27%;
        }

        .text-map-retina{

            display: none;
        }

.iradio{

    margin-top: 20px;
}
        .iradio-logo{
            position: relative;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 40px;

        }
        .iradio-logo-retina{

            display: none;
        }

        .iradio-logo img{
            width: 10%;
            height: 5%; 
        }

        .garry-text{
            position: relative;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 40px;

        }

        .garry-text img{
            width: 20%;
            height: 10%;    
        }
        .garry-text-retina{

            display: none;
        }
.garry{
    width: 100%;
    /*margin-top: 20px;*/
}

        .garrybg{
            position: relative;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 40px;
            background: url("../images/garry-bg.png") no-repeat;
            background-size: 100%;
            text-align: center;

        }
        .centerVideo {
            margin: auto;
            width:33%;
        }
        .garrybg-retina{
            display: none;
        }




.enter{
    width: 100%;
    /*margin-top: 20px;*/
}       
        .enter-text{
            position: relative;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 5px;


        }

        .enter-text img{
            width: 10%;
            height: 5%;
            mar
        }

        .enter-text-retina{
            display: none;
        }
.win{
    width: 100%;
    height: 80%;
    margin-top: 50px;
    padding-top: 50px;
    /*margin-top: 20px;*/
}       
        .chancetowin{
            position: relative;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 40px;


        }

        .chancetowin img{
            width: 70%;
            height: 55%;
            mar
        }

        .chancetowin-retina{
            display: none;
        }

::-webkit-input-placeholder {
    color: red;
    font-weight: bold;
}
:-moz-placeholder {
    color: red;
    font-weight: bold;
}
:-ms-input-placeholder {
    color: red;
    font-weight: bold;
}

.social-retina{
        display: none;
}

.form-control{

    margin-bottom: 5px;
}

.btn-submit{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 50px;
        display: block;
}

#btn {
    border: 0;
    text-align: center;
    width: 80px;
    margin-left: 50%;
    margin-right: 50%;
    margin-top: 10px;
}

#share{

    text-align: center;
    display: block;
    width: 30%;
    height: 10%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-bottom: 20px; 
}

.player .title{

    display: none;
}

.fb-share-button{
    margin: 4px 10px 0px 10px;
    margin
    display: block;
    position: relative;
    float: left;
}
.twitter-share-button{
    margin: 10px;
    display: block;
    position: relative;
}

.footer{
    position: relative;
    width: 100%;
    height: 100%;
}

.footer-vid{
    width: 100%;
    height: 700px;
}

.footer-vid-retina{
    display: none;
}

@media only screen and (max-width: 400px){

        .container-fluid{
            width: 100%;
        }

        .row{
            position: relative;
            width: 100%;
        }

        .header{
            width: 100%;
            position: relative;
        }

        .logo-small{
            display: none;
        }

        .logo-small-retina{
            display: block;
            position: relative;
            padding-top: 10px;
            margin-left: 10px;
        }

        .main-logo{
            display: none;
        }

        .main-logo-retina{
            display: block;
        }

        .main-logo-retina img{
            position: relative;
            width: 150px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 105px;
            margin-right: 105px;
        }

        .dream-header{
            display: none;
        }

        .dream-header-retina{
            display: block;
        }

        .dream-header-retina img {
            position: relative;
            width: 318px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 7px;
            margin-right: 7px;
        }

        .map{
            display: none;
        }

        .map-retina{
            display: block;
        }

        .ireland{
            display: none;
        }

        .ireland-retina{
            display: block;
        }

        .ireland-retina img {
            position: relative;
            width: 318px;
            margin-top: -5px;
            margin-bottom: 10px;
            margin-left: 7px;
            margin-right: 7px;
        }

        .text-map{
            display: none;
        }

        .text-map-retina{
            display: block;
        }

        .text-map-retina img {
            position: relative;
            width: 318px;
            margin-top: 35px;
            margin-bottom: 10px;
            margin-left: 7px;
            margin-right: 7px;
        }

        .iradio{
            width: 330px;
            position: relative;
        }
        .iradio-logo{
            display: none;
        }

        .iradio-logo-retina{
            display:block;
        }

        .iradio-logo-retina img {
        position: relative;
        width: 40%;
        margin-top: -12px;
        margin-bottom: 10px;
        margin-left: 93px;
        margin-right: 69px;
        }

        .garry-text{
            display: none;
        }

        .garry-text-retina{
            display: block;
        }

        .garry-text-retina img {
        position: relative;
        width: 200px;
        margin-top: 0;
        margin-bottom: -31px;
        margin-left: 69px;
        margin-right: 69px;
        }

        .garrybg{
            background: none;
        }

        .centerVideo{
            width: 100%;

        }

    /*  .garrybg-retina{
            display: block; 
            height: 40px;
        }

        .garrybg-retina img {
        position: relative;
        width: 400px;
        margin-top: -246px;
        margin-bottom: -240px;
        margin-left: -23px;
        margin-right: 69px;
        }*/


        #garry-vid-retina{
            margin-left: 117px;
            margin-bottom: 0;
            z-index: 1;
            bottom: -48px;
        }

        .enter-text{
            display: none;
        }

        .enter-text-retina{
            display: block;
        }

        .enter-text-retina img {
        position: relative;
        width: 200px;
        margin-top: -136px;
        margin-bottom: -138px;
        margin-left: 65px;
        margin-right: 65px;
        }

        .win {
        position: relative;
        width: 100%;
        height: 80%;
        margin-top: 44px;
        padding-top: 50px;
        /* margin-top: 20px; */
        }

        .chancetowin{
            display: none;
        }

        .chancetowin-retina{
            display: block;
        }

        .chancetowin-retina img{
            position: relative;
            width: 340px;
            margin-top: -35px;
            margin-left: 6px;
            margin-right: 6px;
        }


        .social{
            display: none;
        }
        .social-retina{
            display:block;
            position: relative;
            width: 100%;
        }
        .footer-vid{
            position: relative;
            width: 100%;
            max-height: 100%;
            height: 242px;
        }
    }

我该如何解决这个问题。

我已经集成了bootstrap 3.3.6

这是截图

enter image description here

请帮帮我。

0 个答案:

没有答案
相关问题
最新问题