通过使用Bootstrap网格在移动版本中使图像滑块响应
我正在制作一个图库滑块，其中包含div图片和另一个div图片说明。它在所有设备中都有响应，但我想改变响应方式。我希望在移动版本中图像获得全宽度，并且描述也在下面以全宽度显示。
。
如您所见，粉红色部分位于右侧，我要改变的是获取全宽图像并将粉红色部分放在图像下方。
下面请找我的HTML和更少的代码：
<div class="container">
<div class="row mr0 center-block" >
<div class=" col-lg-12 p0 m0 pr+" >
<div id="jssor_1" class="gallary-slider-wrapper">
<!-- Loading Screen -->
<div data-u="loading" class="gallary-loading-wrap pt0 pl0">
<div class="gallary-filter pt0 pl0"></div>
<div class="gallary-loading pt0 pl0"></div>
</div>
<div data-u="slides" class="gallary-slider m0 p0">
<!-- Slide 1 / removing inline style -->
<div data-p="225.00" style="display: none;">
<!-- removing inline style -->
<div class="col-lg-7 col-md-6 col-sm-7 col-xs-6 m0 p0" >
<div id="icon-wrap" class="icon-overly-close ">
<icon class="icon-md icon-camera3"></icon>
</div>
<figure>
<img class="img-slider" data-u="image" src="https://s.yimg.com/ea/img/-/160205/hero_landscape_1bb7l59-1bb7l5n.jpg" />
</figure>
</div>
<div class="col-lg-5 col-md-4 col-sm-5 col-xs-6 p+ mr0 pr+ slider-content-wrapper" >
<p class="gallary-heading1">MAKE UP</p>
<p class="gallary-heading2">Kanye west and kim kardashian graffiti their own house!</p>
<p class="author-gallary">Jaime Author   |   Dec 22, 2015</p>
<p class="gallary-heading3">industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the</p>
</div>
<div data-u="caption" data-t="0" class="slider-caption">
</div>
</div>
<!-- Slide 2 -->
<div data-p="225.00" style="display: none;">
<!-- removing inline style -->
<div class="col-lg-7 col-md-6 col-sm-7 col-xs-6 m0 p0">
<div id="icon-wrap" class="icon-overly-close ">
<icon class="icon-md icon-camera3"></icon>
</div>
<figure>
<img class="img-slider" data-u="image" src="https://s.yimg.com/ea/img/-/160205/hero_landscape_1bb7l59-1bb7l5n.jpg" />
</figure>
</div>
<div class="col-lg-5 col-md-4 col-sm-5 col-xs-6 p+ mr0 pr+ slider-content-wrapper" >
<p class="gallary-heading1">MAKE UP</p>
<p class="gallary-heading2">Kanye west and kim kardashian graffiti their own house!</p>
<p class="author-gallary">Jaime Author   |   Dec 22, 2015</p>
<p class="gallary-heading3">industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the</p>
</div>
<div data-u="caption" data-t="0" class="slider-caption">
</div>
</div>
<!-- Slide 3 -->
<!-- Slide 4 -->
<!-- End of Slides -->
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05 slider-navigator" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" class="slider-prototype"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l slider-arrow-left " data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r slider-arrow-right " data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
</div>
</div>
</div>
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
/* Variabless START : */
@gallaryHeading1_color : @white;
@gallaryHeading1_size :15px ;
@gallaryHeading2_color :@white;
@gallaryHeading2_size :45px ;
@autherGallary_Color : @black;
@gallaryHeading3_color :@white;
@gallaryHeading3_size : 16px;
@sliderContentWrapper_bg:@mainpink;
@gallaryHeadingHover_color:@pink-hover;
/* Variabless END : */
.gallary-slider-wrapper{
position: relative;
margin: 0 auto;
top: 0px;
left: 0px;
width: 1200px;
height: 470px;
overflow: hidden;
visibility: hidden;
}
.gallary-loading-wrap{
position: absolute;
}
.gallary-filter{
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
display: block;
width: 100%;
height: 100%
}
.gallary-loading{
position:absolute;
display:block;
background:url('img/loading.gif/24x24') no-repeat center center;
top:0px;
left:0px;
width:100%;
height:100%
}
.gallary-slider{
cursor: pointer;
position: relative;
top: 0px;
left: 0px;
right:0px;
height: 470px;
overflow: hidden;
padding-right:0px;
}
.img-slider{
width:700px;
height:470px;
opacity: 1.0 !important;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.img-slider:hover{
opacity: 0.70 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.slider-content-wrapper{
background-color:@sliderContentWrapper_bg;
height:470px;
text-align:center;
}
.slider-caption{
position: absolute;
top: 100px;
left: 600px
}
.slider-navigator{
bottom:16px;
right:16px
}
.slider-prototype{
width:16px;
height:16px;
}
.slider-arrow-left{
top:0px;
left:12px;
width:20px;
height:58px;
width:20px;
}
.slider-arrow-right{
top:0px;
right:12px;
width:20px;
height:58px;
}
.jssorb05 {
position: absolute;
height:60px !important;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height:60px !important;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 20px;
height: 58px;
cursor: pointer;
background: url('img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -90px -31px; }
//.jssora22l:hover { background: url();}
#icon-wrap{
background-color: @white;
width:45px;
height:45px;
text-align: center;
}
.gallary-heading1{
color:@gallaryHeading1_color;
.font-family(@font-Oswald-Bold);
font-size: @gallaryHeading1_size;
text-transform: uppercase;
&:hover{
color:@gallaryHeadingHover_color;
}
}
.gallary-heading2{
color:@gallaryHeading2_color;
.font-family(@font-Oswald-Bold);
font-size: @gallaryHeading2_size;
text-transform: uppercase;
&:hover{
color:@gallaryHeadingHover_color;
}
}
.author-gallary{
color:@autherGallary_Color;
.font-family(@font-Oswald-Regular);
font-size:12pt;
font-weight: 400;
line-height: 26px;
text-transform: capitalize;
}
.gallary-heading3{
color:@gallaryHeading3_color;
.font-family(@font-SourceSansPro-Regular);
font-size: @gallaryHeading3_size;
text-align: left;
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？