0
私はAsp.net MVCのウェブサイトをbulidingしています。ブートストラップフレームワークの初心者 - 私のプロジェクトをモバイルデバイスとタブデバイスに対応させようとしています。しかし、私のコンテナ内のテキストは、小さなサイズのデバイスでは重なっているようです。これは私のコードです。 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セクションと.footer容器は.featureコンテナと重なっています。 [2]
[これは、モバイルでどのように見えるかである] [1]
アップデート[これは、それがメディアデバイス上でどのように見えるかである]：提案のためThankuそんなに： @Miguelレイテ。それは助けになった。
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
動画セクションのコンテナをフィーチャーコンテナの下から開始することはできますか？