-1
我使用Twitter Bootstrap3。我有一個頁腳部分(灰色部分),上面是一些divs
。我給了那些divs
col-xs-12
類到移動設備div
垂直顯示,但問題是在移動大小,那些divs
位於我的頁腳,甚至在頁面的底部。問題是什麼?我的代碼和JsFiddle正在關注。Bootstrap-元素重疊在特別小的尺寸
HTML:
<div id="pre-footer" class="center-block">
<div class="adv-clickable col-md-3 col-xs-12">
<a href="#"><p>تبلیغات کلیکی</p></a>
<a href="#"><p>قوانین</p></a>
<a href="#"><p>آگهیدهندگان</p></a>
<a href="#"><p>نمایش دهندگان</p></a>
<a href="#"><p>سوالات متداول</p></a>
<a href="#"><p>هزینهها</p></a>
<a href="#"><p>تسویه حساب با نمایشدهندگان</p></a>
</div>
<div class="adv-clickable col-md-3 col-xs-12 center-block">
<a href="#"><p>تبلیغات کلیکی</p></a>
<a href="#"><p>قوانین</p></a>
<a href="#"><p>آگهیدهندگان</p></a>
<a href="#"><p>نمایش دهندگان</p></a>
<a href="#"><p>سوالات متداول</p></a>
<a href="#"><p>هزینهها</p></a>
<a href="#"><p>تسویه حساب با نمایشدهندگان</p></a>
</div>
<div id="pre-footer-nested1" class="col-md-3 col-xs-12 center-block">
<img src="images/pre-footer-logo.png">
<div id="socials">
<a href="#"><i class="fa fa-3x fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-3x fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-3x fa-linkedin-square"></i></a>
<a href="#"><i class="fa fa-3x fa-instagram"></i></a>
<a href="#"><i class="fa fa-3x fa-telegram"></i></a>
</div>
<form action="#" class="form-group">
<label for="email">از آخرین اخبار آموزشی و تبلیغاتی با خبر شوید</label>
<input type="email" id="email" class="form-control" placeholder="آدرس ایمیل خود را وارد کنید" >
<input type="submit" value="ثبتنام در خبر نامه" class="btn btn-block btn-success">
</form>
</div>
<div id="pre-footer-nested2" class="col-md-3 col-xs-12">
<img src="images/nemad.jpg" >
<div class="col-md-12">
<div class="footer-logos">
</div>
<div class="footer-logos">
</div>
<div class="footer-logos">
</div>
<div class="footer-logos">
</div>
</div>
</div>
</div>
<div id="footer" class="col-md-12">
<p class="color-white">©کپیرایت ۱۳۹۶ کسب و کارهای نوپای خاورزمین</p>
</div>
CSS:
#pre-footer{
width: 75%;
height: 200px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 150px;
position: relative;
}
.adv-clickable{
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.adv-clickable a:first-child p{
margin-bottom: 30px;
}
.adv-clickable p{
color: #606060;
font-size: 12px;
font-weight: bold;
}
.adv-clickable a{
text-decoration: none;
}
#pre-footer-nested1{
display: flex;
flex-direction: column;
justify-content: center;
}
#pre-footer-nested1 img{
width: 40px;
height: 40px;
margin: 0 auto;
}
#pre-footer-nested2{
display: flex;
flex-direction: column;
justify-content: center;
}
#socials{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#socials i{
color: #01a89e;
}
#pre-footer-nested1 form{
margin-top: 20px;
}
#pre-footer-nested1 form label{
font-size: 10px;
font-weight: bold;
margin-bottom: 10px;
}
#pre-footer-nested1 input:last-child{
margin-top: 10px;
background-color: #01a89e;
}
#pre-footer-nested1 input:last-child:active{
background-color: #0f8079;
}
#pre-footer-nested2{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
#pre-footer-nested2 img{
width: 100px;
height: 120px;
}
#pre-footer-nested2 div{
display: flex;
margin-top: 22px;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-logos{
width: 40px;
height: 40px;
border: 1px solid #9d9d9d;
border-radius: 5px;
}
#footer{
margin-top: 70px;
background-color: #333333;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
}
#footer p{
color: #ccc;
font-size: 11px;
}
JsFiddle 我該如何解決呢?