如何在过渡期间垂直居中 Bootstrap 4 Carousel slide？
How to Vertically Center a Bootstrap 4 Carousel slide during its transition?
我正在创建一个旋转木马来保存推荐，但我在幻灯片的垂直对齐方面遇到了一些问题。
理想情况下，幻灯片将在进入屏幕时居中，但目前幻灯片将在顶部进入，然后一旦过渡结束，它就会跳到居中对齐。
代码：
html:
<div id="Testimonials" class="text-center bg-dark py-3">
<div class="container">
<div id="testimonial_carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox">
<div class="carousel-item testimonial-carousel active">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae. Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl turpis, imperdiet condimentum urna.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
</div>
<a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
CSS
.testimonial-carousel-inner {
height:auto;
}
.carousel-control-next-hidden,.carousel-control-prev-hidden{
position:absolute;
top:43.75%;
height:50px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:50px;
color:#fff;
background-color: rgba(111,111,111,0.2);
text-align:center;
opacity:.9
}
.carousel-control-next-hidden:hover,.carousel-control-prev-hidden:hover{
color:#fff;
background-color: rgba(0, 115, 255, 0.5);
text-decoration:none;
outline:0;
opacity:0.9;
}
.carousel-control-prev-hidden {
left:3%
}
.carousel-control-next-hidden {
right:3%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
Javascript
$(document).ready(function() {
$(window).resize(function() {
standardiseHeight("testimonial-carousel");
});
standardiseHeight("testimonial-carousel");
function standardiseHeight(divName) {
// Sets a var to hold the height of the tallest slide
$maxHeight = 0;
// Resets previous height setting.
$("."+divName+"-inner").css("height","auto");
// Iterates through all slides
$("."+divName).each(function(i, obj) {
$thisHeight = $(this).outerHeight();
//Compares height with the max number, sets max to the highest of the two
if ($thisHeight > $maxHeight){
$maxHeight = $thisHeight;
}
});
// Sets the height of the container to the tallest slide
$("."+divName+"-inner").css("height",$maxHeight+"px");
}
});
和一个 jsfiddle 来提供示例
https://jsfiddle.net/yL877nhz/11/
修复此问题的一些失败尝试包括：
设置推荐转盘的高度 class 而不是推荐转盘内部。
将 "d-flex align-items-center" class 设置为轮播项目而不是它们的容器
将 "card" class 附加到 "carousel-inner" div，这让过渡更加混乱。
我所做的只是设置一个标志，以禁止在任何给定时间多次 运行 重新计算函数。我 运行 在 window load 和 resize 事件中使用它。我正在让所有幻灯片具有相同的高度。
let parsing = false,
tCar = $('#testimonial_carousel'),
reCalc = function() {
if (!parsing) {
parsing = true;
$('.card').height('auto');
setTimeout(() => {
let height = 0;
$('.carousel-item', tCar).each(function() {
height = Math.max(height, $(this).height())
})
$('.card',tCar).each(function() {
$(this).height(height);
})
tCar.height(height);
parsing = false;
})
}
}
$(window).on('load resize', reCalc);
.testimonial-carousel-inner {
height: auto;
}
.card {
justify-content: space-around;
}
div.card-body {
flex-grow: 0;
}
.card small{
padding: 15px;
}
#testimonial_carousel {
transition: height .3s cubic-bezier(.4,0,.2,1);
}
.carousel-control-next-hidden,
.carousel-control-prev-hidden {
position: absolute;
top: calc(50% - 25px);
height: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
color: #fff;
background-color: rgba(111, 111, 111, 0.2);
text-align: center;
opacity: .9
}
.carousel-control-next-hidden:hover,
.carousel-control-prev-hidden:hover {
color: #fff;
background-color: rgba(0, 115, 255, 0.5);
text-decoration: none;
outline: 0;
opacity: 0.9;
}
.carousel-control-prev-hidden {
left: 3%
}
.carousel-control-next-hidden {
right: 3%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<main>
<div id="Testimonials" class="text-center bg-dark py-3">
<div class="container">
<div id="testimonial_carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox">
<div class="carousel-item testimonial-carousel active">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae.
Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div>
<small>Anonymous</small>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl
turpis, imperdiet condimentum urna.</div>
<small>Anonymous</small>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut
vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet
leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div>
<small>Anonymous</small>
</div>
</div>
</div>
<a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</main>
随意将 .card 的 justify-content 更改为 space-between 或 center，如果这是您想要的。别忘了 prefix.
如果您对所有具有相同高度的幻灯片不满意并且希望轮播的高度在幻灯片之间设置动画，我会说在 SO 上请求太复杂了，使用 Bootstrap v4的轮播组件。您应该雇用某人为您编写代码，或者寻找开箱即用的提供此功能的轮播（即：Slick）。
参考："I'm creating a carousel for the company I am working for to hold testimonials"，大致翻译为："I have a job I'm not qualified for so please be so kind as to work so I can get paid."
最好你根本不提这个。如果您希望人们帮助您，请确保您已尽一切可能：
- 让其他人更容易帮助你
- 让你的问题足够有用（通用），这样它的答案就有很大的机会帮助其他有类似问题的人 - 换句话说，不要问非常本地化的问题，这只会帮助非常具体的案例（你的）回答时。
我正在创建一个旋转木马来保存推荐，但我在幻灯片的垂直对齐方面遇到了一些问题。
理想情况下，幻灯片将在进入屏幕时居中，但目前幻灯片将在顶部进入，然后一旦过渡结束，它就会跳到居中对齐。
代码：
html:
<div id="Testimonials" class="text-center bg-dark py-3">
<div class="container">
<div id="testimonial_carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox">
<div class="carousel-item testimonial-carousel active">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae. Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl turpis, imperdiet condimentum urna.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
</div>
<a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
CSS
.testimonial-carousel-inner {
height:auto;
}
.carousel-control-next-hidden,.carousel-control-prev-hidden{
position:absolute;
top:43.75%;
height:50px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:50px;
color:#fff;
background-color: rgba(111,111,111,0.2);
text-align:center;
opacity:.9
}
.carousel-control-next-hidden:hover,.carousel-control-prev-hidden:hover{
color:#fff;
background-color: rgba(0, 115, 255, 0.5);
text-decoration:none;
outline:0;
opacity:0.9;
}
.carousel-control-prev-hidden {
left:3%
}
.carousel-control-next-hidden {
right:3%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
Javascript
$(document).ready(function() {
$(window).resize(function() {
standardiseHeight("testimonial-carousel");
});
standardiseHeight("testimonial-carousel");
function standardiseHeight(divName) {
// Sets a var to hold the height of the tallest slide
$maxHeight = 0;
// Resets previous height setting.
$("."+divName+"-inner").css("height","auto");
// Iterates through all slides
$("."+divName).each(function(i, obj) {
$thisHeight = $(this).outerHeight();
//Compares height with the max number, sets max to the highest of the two
if ($thisHeight > $maxHeight){
$maxHeight = $thisHeight;
}
});
// Sets the height of the container to the tallest slide
$("."+divName+"-inner").css("height",$maxHeight+"px");
}
});
和一个 jsfiddle 来提供示例
https://jsfiddle.net/yL877nhz/11/
修复此问题的一些失败尝试包括：
设置推荐转盘的高度 class 而不是推荐转盘内部。
将 "d-flex align-items-center" class 设置为轮播项目而不是它们的容器
将 "card" class 附加到 "carousel-inner" div，这让过渡更加混乱。
我所做的只是设置一个标志，以禁止在任何给定时间多次 运行 重新计算函数。我 运行 在 window load 和 resize 事件中使用它。我正在让所有幻灯片具有相同的高度。
let parsing = false,
tCar = $('#testimonial_carousel'),
reCalc = function() {
if (!parsing) {
parsing = true;
$('.card').height('auto');
setTimeout(() => {
let height = 0;
$('.carousel-item', tCar).each(function() {
height = Math.max(height, $(this).height())
})
$('.card',tCar).each(function() {
$(this).height(height);
})
tCar.height(height);
parsing = false;
})
}
}
$(window).on('load resize', reCalc);
.testimonial-carousel-inner {
height: auto;
}
.card {
justify-content: space-around;
}
div.card-body {
flex-grow: 0;
}
.card small{
padding: 15px;
}
#testimonial_carousel {
transition: height .3s cubic-bezier(.4,0,.2,1);
}
.carousel-control-next-hidden,
.carousel-control-prev-hidden {
position: absolute;
top: calc(50% - 25px);
height: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
color: #fff;
background-color: rgba(111, 111, 111, 0.2);
text-align: center;
opacity: .9
}
.carousel-control-next-hidden:hover,
.carousel-control-prev-hidden:hover {
color: #fff;
background-color: rgba(0, 115, 255, 0.5);
text-decoration: none;
outline: 0;
opacity: 0.9;
}
.carousel-control-prev-hidden {
left: 3%
}
.carousel-control-next-hidden {
right: 3%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<main>
<div id="Testimonials" class="text-center bg-dark py-3">
<div class="container">
<div id="testimonial_carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox">
<div class="carousel-item testimonial-carousel active">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae.
Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div>
<small>Anonymous</small>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl
turpis, imperdiet condimentum urna.</div>
<small>Anonymous</small>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut
vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet
leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div>
<small>Anonymous</small>
</div>
</div>
</div>
<a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</main>
随意将 .card 的 justify-content 更改为 space-between 或 center，如果这是您想要的。别忘了 prefix.
如果您对所有具有相同高度的幻灯片不满意并且希望轮播的高度在幻灯片之间设置动画，我会说在 SO 上请求太复杂了，使用 Bootstrap v4的轮播组件。您应该雇用某人为您编写代码，或者寻找开箱即用的提供此功能的轮播（即：Slick）。
参考："I'm creating a carousel for the company I am working for to hold testimonials"，大致翻译为："I have a job I'm not qualified for so please be so kind as to work so I can get paid."
最好你根本不提这个。如果您希望人们帮助您，请确保您已尽一切可能：
- 让其他人更容易帮助你
- 让你的问题足够有用（通用），这样它的答案就有很大的机会帮助其他有类似问题的人 - 换句话说，不要问非常本地化的问题，这只会帮助非常具体的案例（你的）回答时。