css - Bootstrap - 容器在小型设备中重叠

Question

我正在使用 Asp.net MVC 构建网站。 bootstrap 框架的初学者 - 我试图让我的元素响应移动和标签设备。但是我的容器中的文本似乎与小型设备重叠。这是我的代码。索引.cshtml

<div class="feature">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4" id="left">
            <img class="img-responsive" src="~/Content/Images/health/ayurveda7.jpg" />
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4" id="middle">
            <h1>Ayurveda - Harmony of <span>Mind, Body</span> and <span>Soul</span>.</h1>
            <p>
                Sprouted in the pristine land of India some 5000 years ago, Ayurveda, the science of life and longevity,
                is the oldest healthcare system in the world and it combines the profound thoughts of medicine and philosophy.
                Since then Ayurveda has stood for the wholesome physical, mental and spiritual growth of humanity around the world.
                Today, it's a unique, indispensable branch of medicine, a complete naturalistic system that depends on the diagnosis
                of your body's humours - vata, pitta and kapha - to achieve the right balance.
            </p>
            @*<a href="#" class="btn btn-default" role="button">Rejuvenate</a>*@
            <button class="btn btn-default">
                @Html.ActionLink("Rejuvenate", "Health")
            </button>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
            <img class="img-responsive" src="~/Content/Images/health/ayurveda5.jpg" />
        </div>
    </div>


</div>
</div>
<div class="clearfix"></div>

<div class="video-section">
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-7 hidden-sm hidden-xs">

        <iframe id="player" width="800" height="480"
                src="https://www.youtube.com/embed/jlEYu--6T14? rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&playlist=jlEYu--6T14"
                frameborder="0" allowfullscreen></iframe>

        <script>
            @*To mute the video*@
    @*To load the youtube player api asynchronously*@
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


            var player;
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    //height: '390',
                    //width: '640',
                    //videoId: 'jlEYu--6T14',
                    events: {
                        'onReady': onPlayerReady,
                        //'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(event) {
                event.target.setVolume(0);
                event.target.playVideo();
                //player.mute();
            }
        </script>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-5">
        <div class="content">
            <br />
            <h1>Culture,Festivals and Art Forms</h1>
            <p>
                Gifted with some of the unique classical Dances, art form and festivals, Kerala is said to have a cultural history that dates
                back to a thousand years.
                The land known for the pooram festivals is also blessed with unique art forms like Theyyam, Kutiyattam and Patayani.
            </p>
            <p>
                Festivals are true celebrations in God's Own Country; occasions when grandeur prevails over the characteristic simplicity
                of the Kerala lifestyle. Be it the state festival of Onam or the one at a local place of worship, faboulous attire and sumptuous
                feasts are a must for the celebrations.
            </p>
            <p>
                Besides being occasions for merry-making, festivals of  Kerala have traditionally been preservers of the art and culture
                of this land. Whether religious or social, traditional or modern, a festival here is never complete without an art event
                which would range from the 2000-year-old Kutiyattam to contemporary stage shows.
            </p>
            <p>

                <button class="btn btn-default">
                    @Html.ActionLink("Celebrate", "Festivals")
                </button>
            </p>
        </div>
    </div>
</div>  

</div>
<div class="clearfix"></div>

/*footer*/
<footer>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-4">

                    <h3>Promoting Kerala</h3>
                    Trivandrum, Kerala - 695003<br />
                    India

                </div>
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <h3>Travel Information</h3>
                    <ul>

                        <li>@Html.ActionLink("How to reach", "Reach")</li>
                        <li>@Html.ActionLink("Visa on Arrival", "Visa")</li>
                        <li>@Html.ActionLink("Travel Tips", "TravelTips")</li>
                    </ul>

                </div>
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <h3>Share</h3>

                    <img src="~/Content/Images/backgrd/facebook.jpg" />
                    <img src="~/Content/Images/backgrd/twitter.jpg" />
                </div>

            </div>
            <p id="copy">&copy; xyz</p>
        </div>
    </footer>

style.css

    /*****************************************Feature*********************Ayurveda************/
.feature .container{

    height:350px;
    background: url(/Content/Images/backgrd/bg-ayur12.jpg) no-repeat center     center; 
    background-size: cover;
}
.feature .col{
    width:30%;
    float:left;

    padding:10px;
    margin-right:42px;
    margin-left:25px;
    color:#7b278e;
}
#left img{
    padding-left:15px;
}
#middle{
    margin:auto;
    background: url(/Content/Images/backgrd/bg-ayur4.jpg) no-repeat center center; 
    background-size: cover;
    height:350px;
}
.feature span{
    font-family:'Great Vibes',cursive;
}
.feature .row img{
    height:350px;
    width:400px;
}
#middle .btn {
    background: transparent;
    border:1px solid #7b278e;
    text-align:center;
    margin-left:138px;
    -moz-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
}
#middle .btn a{
    color:#7b278e;
    text-decoration:none;
}
#middle .btn:hover{
    border:1px solid #7b278e;
    box-shadow:3px 3px 6px #7b278e;
    font-weight:600;
    /*box-shadow: 0 1px 6px #7b278e;/*rgba(0, 0, 0, 0.6);*/*/
}
.clearfix{
    clear:both;
}

/*****************Video Section****************Art, Festivals***************/
.video-section {
    margin-top: 60px;
}
#player{
    margin-left:10px;
    float:left;
    padding-right:10px;
}
.video-section iframe{
    margin:auto;
}
.video-section .content{
     height:480px;
     border:1px solid green;

    background: url(/Content/Images/backgrd/bg-art2.jpg) no-repeat center center; 
    background-size: cover;
    margin-left:10px;
}
.video-section .content h1{ 
    color:#f2f2f2;
    padding-left:10px;

}
.video-section .content p{ 
    color:#f2f2f2;
    padding-left:10px;
 }
.video-section .content .btn{
    background: transparent;
    border:1px solid #f2f2f2;
    text-align:center;
    margin-right:50px;
    -moz-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
     transition: box-shadow 0.5s;
}
.video-section .content .btn a{
    color:#f2f2f2;
    text-decoration:none;
}
.video-section .content .btn:hover{
     border:1px solid #f2f2f2;
     box-shadow: 0 1px 6px #f2f2f2;
     font-weight:600;
    }

/**********************Footer************/
footer{
    width:100%;
    background-color:#CC0000;
    color:#f2f2f2;
}
footer h3 {
    font-weight:700;
    font-size:16px;
}
footer .col{
    margin-left:15px;
    border:1px solid blue;
}
footer img{
    height:8px;
    width:8px;
}
footer .row ul{
    list-style:none;
}
footer .row li{
    padding-bottom:0;
    margin-bottom:0;
}
footer .row li a{
    text-decoration:none;
    color:#f2f2f2;
}
footer .row li a:hover{
    font-weight:700;
}
footer .row img{
    height:30px;
    width:30px;
    margin-right:10px;
}
#copy{
    float:right;
    margin-right:10px;
    margin-bottom:5px;
    color:#f2f2f2;
}
@media(max-width: 750px){
    .btn{
        margin:auto;
    }
.container{
    margin-top:10px;
}
}

.video-section 和 .footer 容器与 .feature 容器重叠。[这是它在中型设备上的样子][1]

[这是它在手机上的样子][2]

---

更新:@Miguel Leite:非常感谢您的建议。它有帮助。我像这样更改了代码:

index.html

<div class="video-section">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-7" id="video-content">

但视频部分容器的开头仍然与功能容器重叠。 Mobile view after edit

我能否让视频部分容器仅在功能容器下方启动？

Answer 1

您需要将 .container 类添加到您的 .video-section 元素中，或者将 .row 包装到 中.container 元素。

两种解决方案:

<div class="video-section">
    <div class="container">
        <div class="row">
             (...)
        </div>
    </div>
</div>

或:

<div class="video-section container">
    <div class="row">
         (...)
    </div>
</div>

这应该可以解决 :)