我正在创建一个Bootstrap(版本3.3)网站,它有一个小型旋转木马,我想在它的右侧立即创建3个盒子; (参考图片了解我正在尝试做什么)。
显然我希望它全部响应,我把旋转木马放在一列(中等和大屏幕宽度为8)+偏移量为1,而盒子宽度为2 + 1偏移量。 然后我还在2列中创建了另一行(和列) - 这样所有的框都会同时在xs屏幕尺寸上移动到Carousel下面。
我使用了row-eq-height来制作Carousel列和带有相同高度的盒子的列,但我不确定如何制作2个盒子,其高度为Carousel&的33%。 1个盒子转盘高度的34%。 (显然,我希望彼此之间显示的方框,它们之间没有排水沟。)
我的代码到目前为止在Bootply上; https://www.bootply.com/RQfetegi0e
其他HTML代码到目前为止;
<div class="container" style="padding-top:100px;">
<div class="row no-gutter">
<div class="col-md-offset-1 col-md-8 col-sm-8 col-xs-12 row-eq-height">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner img-responsive center-block">
<div class="active item">
<img src="images/carousel/coming-events.jpg" alt="">
</div>
<div class="item img-responsive center-block">
<img src="images/carousel/play-group.jpg" alt="">
</div>
<div class="item img-responsive center-block">
<img src="images/carousel/learn-skills.jpg" alt="">
</div>
<div class="item img-responsive center-block">
<img src="images/carousel/kids-xmas.jpg" alt="">
</div>
<div class="item img-responsive center-block">
<img src="images/carousel/backyard-sports.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 no-padding">
<div class="row">
<div class="col-xs-12" style="margin-bottom:-20px; margin-top:-20px; height:33%;">
<h3 style="text-align:center; color: white; background-color:red; height:33%;">Text Here</h3>
</div>
<div class="col-xs-12" style="margin-top:-25px; margin-bottom-25px; height:34%;">
<h3 style="text-align:center; color: white; background-color:green; height:34%;">Text Here</h3>
</div>
<div class="col-xs-12" style="margin-top:-25px; margin-bottom:-25px; height:33%;">
<h3 style="text-align:center; color: white; background-color:blue; height:33%;">Text Here</h3>
</div>
</div>
</div>
</div>
</div>
CSS代码:
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
答案 0 :(得分:1)
使用jQuery很容易。但是当滑块的所有图像都被加载时,侧面部分的高度将立即改变。
$(document).ready(function() {
$('img').load(function() {
var equalHeight = $('.slider').height();
var thirdHeight = equalHeight / 3;
$('.three-equals').each(function() {
$(this).height(thirdHeight);
});
});
});
.three-equals h3 {margin: 0px; padding: 0px;}
.three-equals {background-color: yellow;}
.three-equals:nth-child(2) {background-color: red;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-8 slider">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://i1.wp.com/youmeandtrends.com/wp-content/uploads/2015/11/abstract-beautiful-flower-images.jpg" alt="Image 1">
</div>
<div class="item">
<img src="http://www.lanlinglaurel.com/data/out/76/4584119-high-resolution-images.jpeg" alt="Image 2">
</div>
<div class="item">
<img src="http://newflowerwallpaper.in/download/friendship-flowers-images-and-wallpapers/friendship-flowers-images-and-wallpapers-1.jpg" alt="Image 3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="three-equals">
<h3>Heading 1</h3>
</div>
<div class="three-equals">
<h3>Heading 2</h3>
</div>
<div class="three-equals">
<h3>Heading 3</h3>
</div>
</div>
</div>
如果您不希望效果立即在高度上,您可以在屏幕上使用微调器(加载器),直到图像被加载。
答案 1 :(得分:0)
最快的解决方案 - 如果您的旋转木马具有固定高度,则将相同高度设置为第二(右)行... 并将background-color属性设置为div,而不是h3,并删除填充..
<div class="row" style="height:261px">
<div class="col-xs-12" style="height:33%;background-color:red;">
<h3 style="text-align:center; color: white; height:33%;">Text Here</h3>
</div>
<div class="col-xs-12" style="height:34%;background-color:green;">
<h3 style="text-align:center; color: white; height:34%;">Text Here</h3>
</div>
<div class="col-xs-12" style="height:33%;background-color:blue;">
<h3 style="text-align:center; color: white; height:33%;">Text Here</h3>
</div>
</div>
答案 2 :(得分:0)
我处理高度的方式是使用inherit
,然后添加一些填充。
h3 {
height: inherit;
padding: 3% 0;
}
&#13;
<div class="col-xs-12">
<h3 style="text-align:center; color: white; background-color:red;">Text Here</h3>
</div>
<div class="col-xs-12">
<h3 style="text-align:center; color: white; background-color:green;">Text Here</h3>
</div>
<div class="col-xs-12">
<h3 style="text-align:center; color: white; background-color:blue;">Text Here</h3>
</div>
&#13;