我正在处理页脚。在右侧向下 - 图像附加 - 我有一个响应"订阅"按钮。有一个普通行的潜水。这个一般行包含两个不同的行。 第一行包括两个网格:col-lg-4 / col-lg-8(白色背景) 第二个包括三个网格:col-lg-4 / col-lg-4 / col-lg-4(黑色背景) 我想将图像放在第一行的第二行中,该网格位于第一行最右边网格的顶部。 问题是虽然图像放在第二行但它出现在第一行!我想将其更正为模式
<div class="container-fluid p0 hidden-xs hidden-sm" style="border: solid yellow">
<div class="row">
<div class="col-lg-12 col-md-12 ">
<div class="row pb+ pt+ footer-border ">
<div class="col-lg-12 col-md-12">
<div class="container">
<!-- brand starts -->
<div class="col-lg-4 col-md-4 hidden-xs pl0">
<a href="/">
<i class=" icon-famousLogo icon-color famous-large "></i>
</a>
</div>
<!-- brand ends -->
<!-- Social Sharing Start -->
<div class="col-lg-8 col-md-8 hidden-xs clearfix">
<div class="col-lg-5 col-md-5 col-offset-7 pt-">
<ul class="list-inline float-r">
<li>
<span class="follow-us pr">FOLLOW US</span>
</li>
<li>
<a href="https://www.facebook.com/famousmagazine">
<i class=" icon-facebook icon-color facebook pr "></i>
</a>
</li>
<li>
<a href="https://twitter.com/famousweekly ">
<i class=" icon-twitter icon-color twitt pr"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/famousweekly/ ">
<i class=" icon-instagram icon-color instagram"></i>
</a>
</li>
<!-- They are supposed to be add later after getting the right URL-->
<!--<li >
<a href="https://www.youtube.com">
<i class=" icon-youtube icon-color youtube"></i>
</a>
</li>
<li >
<a href="https://www.instagram.com" >
<i class=" icon-Pintrest icon-color pint"></i>
</a>
</li>
<li >
<a href="https:https://twitter.com" >
<i class=" icon-tumblr icon-color twitt"></i>
</a>
</li> -->
<!-- Hidden Social Sharing Ends-->
</ul>
</div>
</div>
<!-- Social Sharing Ends -->
</div>
</div>
</div>
<!-- Second Row / Footer Lists Starts -->
<div class="row hidden-xs hidden-sm">
<div class="col-lg-12 col-md-12 ">
<div class="bottomMenu-parent" >
<div class="container">
<div class="col-lg-4 col-md-4 pl0 pt+ pb+" >
<table class="footer-table">
<tr>
<td><a href="#">ABOUT US</a></td>
<td class="pl++"><a href="#">CoNTACT US</a></td>
<tr>
<td><a href="#">TERMS AND CONDITIONS</a></td>
<td class="pl++"><a href="#">ADVERTISE</a></td>
</tr>
<tr>
<td><a href="#">PRIVACY POLICY</a></td>
</tr>
</table>
</div>
<!-- Sign up Starts -->
<div class="col-lg-4 col-md-4">
</div>
<!--Sign Up Ends -->
<div class="col-lg-4 col-md-4">
<figure class="p pb0 footer-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPZA23BVynjg91p0lXTn2yEiCft5VkK70063kgELaL_77gtH_TWg">
</figure>
<a href="#" class="subscribe-button" >
<button type="button" >
SUBSCRIBE <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Second Row / Footer List Ends -->
</div>
</div>
</div>
@media(min-width: @screen-sm-min) {
.follow-us{
color:@mainpink;
.font-family(@font-Oswald-Bold) ;
font-size: 12px;
}
.footer-border{
border: 1px solid @mainpink;
}
.footer-table{
color:@white !important;
text-align: left;
tr{
td{
padding-bottom:10px;
a{
.font-family(@font-SourceSansPro-Regular) !important;
color:@white !important;
text-transform: uppercase;
font-size:14px;
}
}
}
}
.footer-image{
position: absolute;
bottom: 0px;
display: block;
width: 100%;
text-align: center;
}
}
答案 0 :(得分:0)
我已经更改了以下代码,然后就可以了:
.footer-image
{
margin-top: -100px;
bottom: 0px;
display: block;
width: 100%;
text-align: center;
padding-bottom:0px;
}