我有带标题的bootstrap轮播，但风格几乎没有，实际上，图像是左（col-lg-6），标题是正确的（col-lg-6）...请参阅HTML和SCSS代码以便更好地理解。可视示例 - https://i.stack.imgur.com/bkJaM.png
问题是什么？在移动设备上（col-md-12用于图像，col-md-12用于标题），当我调整浏览器窗口大小时，箭头垂直上下移动，但总是应该从顶部开始30％，无论屏幕大小调整多少（移动版）。
顶部：30％不好，顶部：xx px也不好，transofm：translatey（-30％）不好，但顶部：0; margin-top：30％是完美的。我想有更好的方法可以做到这一点？
#upgr-carousel-generic {
background-color: #f3f3f3;
.carousel-caption {
color: #052453;
text-align: left;
position: relative;
left: 0;
top: 0;
right: 14%;
padding: 45px 90px 45px 27px;
text-shadow: none;
h3 {
margin-bottom: 3px;
}
}
.carousel-control {
background: rgba(0, 0, 0, 0.5);
text-shadow: none;
width: 65px;
height: 65px;
position: absolute;
opacity: 1;
top: 44%;
&:hover,
&:focus {
background: rgba(0, 0, 0, 0.5);
};
[class^="icon-"] {
font-size: 65px;
}
}
}
@media (min-width: $screen-lg-min) {
#upgr-carousel-generic .item .image img {
width: 100%;
min-height: 100%;
}
}
@media (max-width: $screen-md-max) {
#upgr-carousel-generic {
.carousel-caption {
padding: 28px 8.6px;
}
.carousel-control {
width: 34px;
height: 34px;
top: 0;
margin-top: 30%;
[class^="icon-"] {
font-size: 34px;
}
}
}
}<div class="slider">
<div class="container">
<div class="row gridsystem">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="upgr-carousel-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 image">
<img src="../src/assets/images/_dev/carousel_image_1.jpg" class="img-responsive" alt="Carousel Image 1">
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 text-left">
<div class="carousel-caption">
<h3 class="title">King gegen King</h3>
<p class="description">Auf ihrer Nordamerika-Reise 1939 treffen König Gorge VI. und seine Gemahlin, Queen Elizabeth, auf den kanadischen Premierminister William Lyon Mackenzie King. Das dabei entstandene Foto wurde später auf einem Wahlplakat des Premierministers verwender, König Gorg VI. jedoch daraus wegretuschiert. Ziel der Nordamerika-Reise war die Stärkung der Monarchie im Dominion Kanada, was der Intention Mackenzie Kings offenbar zuwiderlief.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 image">
<img src="../src/assets/images/_dev/carousel_image_2.jpg" class="img-responsive" alt="Carousel Image 2">
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 text-left">
<div class="carousel-caption">
<h3 class="title">King gegen King</h3>
<p class="description">Auf ihrer Nordamerika-Reise 1939 treffen König Gorge VI. und seine Gemahlin, Queen Elizabeth, auf den kanadischen Premierminister William Lyon Mackenzie King. Das dabei entstandene Foto wurde später auf einem Wahlplakat des Premierministers verwender, König Gorg VI. jedoch daraus wegretuschiert. Ziel der Nordamerika-Reise war die Stärkung der Monarchie im Dominion Kanada, was der Intention Mackenzie Kings offenbar zuwiderlief.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" title="Previous" href="#upgr-carousel-generic" role="button" data-slide="prev">
<span class="icon-ic-arrow-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" title="Next" href="#upgr-carousel-generic" role="button" data-slide="next">
<span class="icon-ic-arrow-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
首先，您需要将此添加到<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font) Try it
ex Relative to the x-height of the current font (rarely used) Try it
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport* Try it
vh Relative to 1% of the height of the viewport* Try it
vmin Relative to 1% of viewports* smaller dimension Try it
vmax Relative to 1% of viewports* larger dimension Try it
%
有关单位的详情，请查看此链接：https://www.w3schools.com/cssref/css_units.asp
视口是用户在网页上的可见区域。
视口因设备而异，在手机上比在电脑屏幕上小。
在平板电脑和手机之前，网页仅针对计算机屏幕设计，网页通常采用静态设计和固定大小。
有关详细信息，请在此处阅读：https://www.w3schools.com/css/css_rwd_viewport.asp