我有一个图表,我的目标是将旋转木马放置在左侧,右侧始终垂直于直线中心(距顶部50%),并将两个箭头都定位在大约5%的位置,但要足够靠近图形。
我很难让它开始工作。我已经尝试过
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="panel panel-filled">
<div class="panel-body carousel">
<h1>Network Bandwidth</h1>
<div id="chart1Carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<small class="lastSelectedMenu">
<span> Current Interval:
<span class="lastSelected" style="color: rgb(255, 235, 59);">day (3/25/2020)</span>
</span>
<select name="last" class="float-right">
<option id="default" value="default">Select Interval</option>
<option value="day">Day</option>
<option value="week">Week</option>
<option value="month">Month</option>
<option value="year">Year</option>
</select>
</small>
<canvas width="558" height="279" id="chart1" style="display: block; width: 558px; height: 279px;" class="chartjs-render-monitor"></canvas>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#chart1Carousel" data-slide="prev">
<span class="fa fa-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">
<span class="fa fa-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
@media screen and (min-width: 768px)
/* .carousel-control .fa-chevron-left {
margin-left: -10px;
}*/
@media screen and (min-width: 768px)
.carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
position: absolute;
width: 30px;
height: 30px;
font-size: 30px;
top: 50%;
}
.carousel-control .fa-chevron-left {
margin-left: -70px;
margin-top: 120px;
}
.carousel-control .fa-chevron-right{
margin-right: -1200px;
margin-top: 120px;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-control.left, .carousel-control.right {
background: none;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30px;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
background-color: rgba(0,0,0,0);
filter: alpha(opacity=50);
opacity: .5;
}
https://codepen.io/bunlongheng/project/editor/Akyrky
如果可以通过查看我的HTML和CSS来发现我的问题,请说几句。
我注意到了几件事,并且您的密码笔是只读的,所以我将其移动到了新的笔上:
{}
中,因此没有被应用。.fa-chevrons
,但它们是span
元素,并且页边距不起作用。这是您拥有的完整代码-没有基本的CSS,因为堆栈代码段具有字符限制。我的codepen链接包含所有内容。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@media screen and (min-width: 768px) {
.item img {
width: 100%;
height: auto;
}
.carousel {
padding-left: 45px;
padding-right: 45px;
}
.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-right {
position: absolute;
width: 30px;
height: 30px;
font-size: 30px;
top: 50%;
display: block;
transform: translate(0, -50%;
)
}
.carousel-control.right {
right: 0;
left: auto;
}
.carousel-control .fa-chevron-left {}
.carousel-control .fa-chevron-right {}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-control.left,
.carousel-control.right {
background: none;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30px;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
background-color: rgba(0, 0, 0, 0);
filter: alpha(opacity=50);
opacity: .5;
}
}
</style>
<div class="col-xs-4">
<div class="panel panel-filled">
<div class="panel-body carousel">
<h1>Carousel Issue</h1>
<div id="chart1Carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<img src="https://i.imgur.com/ltw5Pac.png" width="558" height="279">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#chart1Carousel" data-slide="prev">
<span class="fa fa-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">
<span class="fa fa-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
您会看到我在图表周围添加了一些填充,以显示箭头将如何设置在图表旁边。
最大的事情是更改人字形以阻止元素并将其向上移动50%
其高度(向上15px)。
https://codepen.io/chrislafrombois/pen/RwPqdxj
希望这对您朝正确的方向有所帮助。让我知道是否错过了您想做的事情。