移动设备上的引导轮播箭头垂直上下移动

Question

我有带标题的引导轮播，但样式几乎没有什么不同，实际上，图像在左边 (col-lg-6) ，标题在右边 (col-lg-6)...请参阅 HTML 和 SCSS 代码以获得更好的理解。视觉示例 - https://i.stack.imgur.com/bkJaM.png

有什么问题吗？在移动设备上（col-md-12 用于图像，col-md-12 用于标题），当我调整浏览器窗口大小时，箭头垂直上下移动，但无论屏幕大小调整多少，都应始终为顶部的 30%（手机版）。

top: 30% 不好, top: xx px 也不好, transofm: translatey(-30%) 不好, BUT top: 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>  

Answer 1

首先你需要把它添加到你的<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

那么你可以使用 vw 或 vh:

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