老师,gallery区域的蒙版宽度怎么总长出来一块
<!--gallery区域-->
<section class="gallery">
<div class="container">
<div class="row">
<div class="item col-xs-12 col-sm-6 col-md-6 col-lg-8">
<div class="img-box">
<img src="img/g1.jpg">
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
</div>
<div class="item item2 col-xs-6 col-sm-6 col-md-6 col-lg-4">
<img src="img/g2.jpg">
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g3.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g4.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g5.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g6.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g7.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g8.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g9.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
<div class="item item-small col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="i">
<img src="img/g10.png">
</div>
<p>Lorem Ipsum is simply</p>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="price">$95.00</span>
<div class="panel">
<span class="glyphicon glyphicon-eye-open"></span>
<span> View</span>
<div class="cart">SHOP NOW</div>
</div>
</div>
</div>
</div>
</section>
/*gallery区域*/
.gallery .row{
margin:80px auto;
}
.gallery .row .item{
position:relative;
margin:20px 0;
}
.gallery .row .img-box{
width:100%;
}
.gallery .row img{
width:100%;
}
.gallery .row p{
margin-top:10px;
font-weight:bold;
}
.gallery .row span{
color:#999;
}
.gallery .row .price{
font-size:20px;
position:absolute;
right:15px;
}
.gallery .row .i{
width:238px;
height:251px;
border:1px solid #eee;
text-align:center;
}
.gallery .row .item:hover .i{
border:1px solid #bbb;
}
.gallery .row .item .img-box .panel{
width:100%;
height:60px;
position:absolute;
background:rgba(0,0,0,.7);
bottom:40px;
border-radius:0;
line-height:60px;
padding:0 20px;
display:none;
}
.gallery .row .item:hover .panel{
display:block;
}
.gallery .row .item2 .panel{
width:330px;
}
.gallery .row .item-small .panel{
width:238px;
}
.gallery .row .item .panel span{
color:#fff;
margin-right:4px;
}
.gallery .row .item .panel .cart{
width:120px;
height:30px;
border:2px solid #fff;
color:#fff;
float:right;
line-height:30px;
text-align:center;
font-size:14px;
margin-top:13px;
}
.gallery .row .item .panel .cart:hover{
color:#F07818;
border:2px solid #F07818;
cursor:pointer;
}
正在回答
同学你好,经测试bootstrap中对于col-xs-12有默认的样式:
左右的padding值为15px,所以下面蒙版设置宽度为100%的时候,超出的值为30px。
建议使用媒体查询,在不同宽度条件下,设置蒙版的宽度百分比。
祝学习愉快!
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星