我在Asp.net MVC中建立了一个网站。一个带引导框架的初学者 - 我试图使我的项目响应移动和标签设备。但是我的容器中的文本似乎与小尺寸设备重叠。这是我的代码。 Index.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">© 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
我可以让视频节容器只在功能容器下方启动吗？
答案 0 :(得分：0)
您需要将类.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>
应该修复它：）
答案 1 :(得分：0)
我可以看到的问题的一部分是，您为列提供了相同的空间来容纳移动设备。尝试调整小型和超小型设备的色谱柱尺寸。