剪切元素 - JQuery
你好我使用bootstrap carousel创建bootstrap推荐书，所以我将每个项目划分为3个盒子并且它运行良好但问题将出现在响应式媒体屏幕中，部分高度不会适当的：
所以我的想法是JQuery代码将检查如果窗口宽度小于767px然后将切割.col-xs-12：eq（1）并在.item之后追加它然后将其包裹在行Div然后包裹它在.item Div：
这是一个简单的例子：
在：
Circle: Int -> Shape
Square : Int -> Int -> Shape
之后：代码将检查窗口宽度是否小于767px然后将执行此操作：
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
这里是我的代码：
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
; (function ($) {
"use strict";
var $windowWidth = $(window).width();
if ($windowWidth < 767) {
$('#pencil-testimonials_2 .item').each(function (index, element) {
$(this).find(".col-xs-12:eq(1)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
$(this).find(".col-xs-12:eq(2)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
});
}
})(jQuery);#pencil-testimonials_2 {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
#pencil-testimonials_2 .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
#pencil-testimonials_2 .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#pencil-testimonials_2 .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
#pencil-testimonials_2 .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
1 个答案:
答案 0 :(得分：1)
以下是您可以做的事情：
.carousel.slide {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
.carousel.slide .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
.carousel.slide .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.carousel.slide .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
.carousel.slide .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_1" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_1" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="2">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 1
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 2
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 4
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 5
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 7
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 8
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pencil-testimonials_2" class="carousel slide hidden-md hidden-lg" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="6">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="7">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="8">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 1
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 2
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 4
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 5
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 7
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 8
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
基本上，您只需使用Bootstrap的实用程序类创建两个轮播并隐藏您不想要的轮播：hidden-xs，hidden-sm，hidden-md和hidden-lg。如果您需要更多控制权，您可以随时为平板电脑创建第三个控件。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？