轮播引导程序内的响应文本

Question

我必须在三张不同的图片上放置相同的文本，这些图片放置在引导轮播中。我的问题是如何让这个文本在轮播中响应。你有什么技巧吗？

已编辑

我的问题被误解了。我的意思是我会有一段文本并让它在轮播中响应。例如，在 destkop 中轮播中心的文本必须保持在移动端的中心

Answer 1

您可以使用媒体查询或使用vh 或vw 单位设置文本。

Answer 2

您可以将轮播中的字体大小指定为 em。这样，文本将始终响应，因为 em 是一个相对单位...

Answer 3

所有省略号均表示插入您自己的值。

引导程序 2：

@media(max-width: ...px) {
.carousel-caption h4 {
font-size: ...;
}
.carousel-caption p {
font-size: ...;
}
}

引导程序 3：

@media(max-width: ...px) {
.carousel-caption h3 {
font-size: ...;
}
.carousel-caption p {
font-size: ...;
}
}

Answer 4

默认情况下，包含文本的 div 在 Bootstrap 中居中，而文本本身在 Bootstrap 3 中。要么您使用的是 Bootstrap 2，要么您的样式规则有冲突。无论哪种方式，将text-align: center 添加到中心文本。如果问题是您的包装器 div 的 CSS 有冲突，那么 Bootstrap 开始将其居中的方式如下：

.carousel-caption {
right: 20%;
left: 20%;
padding-bottom: 30px;
}

Answer 5

认为您需要做的是使用媒体查询来调整来自较大显示单元的内容 - 即：sm、md 和 lg- 并使其适合超小的设备屏幕。

您将在下面找到包含 html 的 _index.ejs。 然后是预先编译好的 CSS 规则。第一个用于大于或等于 768px 的显示单元。这些有很大的填充以保持内容居中。下一条规则专门针对超小型设备。请注意，左侧和右侧的填充已大大减少以容纳内容。字体大小也减小了，以便在手机上看起来更吸引人。

<div class="row">

    <div class="col-lg-12">

        <div class="text-center">
            <h2>Reviews</h2>
            <div class="carousel slide" id="carousel-reviews" data-ride="carousel">

                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-reviews" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-reviews" data-slide-to="1"></li>
                    <li data-target="#carousel-reviews" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <p>Beefmania is the best pizza I've ever had! It's what I always have when I go there. Highly recommend trying it with the green salad.</p>
                    </div>
                    <div class="item">
                        <p>The Supreme pizza is to die for!! There's so much of it, too. Make sure you have a light breakfast before you order this one for lunch.</p>
                    </div>
                    <div class="item">
                        <p>Their outstanding wine selection is a perfect match for any of the pizzas. This includes the house wine which is just as good as the finest, and at a very affordable price.</p>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev">
                    <span class="icon-prev fa-stack fa-lg" aria-hidden="true">
                        <i class="fa fa-square-o fa-stack-2x"></i>
                        <i class="fa fa-angle-left fa-stack-1x"></i>
                    </span>
                    <span class="sr-only">Previous</span>
                </a>
                <!-- end of left control -->
                <a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next">
                    <span class="icon-next fa-stack fa-lg" aria-hidden="true">
                        <i class="fa fa-square-o fa-stack-2x"></i>
                        <i class="fa fa-angle-right fa-stack-1x"></i>
                    </span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>

</div>

_carousel.less：

.carousel .item {
	padding: @padding (@padding * 12) (@padding * 4) (@padding * 12);
	font-size: (@font-size * 1.5);
}

@media(max-width: 767px) {
	.carousel .item {	
		font-size: @base-font-size;
		padding:   @padding (@padding * 3) (@padding * 4) (@padding * 3);
	}
}

Answer 6

我会推荐使用这样的东西

.carousel-caption h3 {
    font-weight: bold;
    font-size: 1.2em; /* small size since this is the default in Bootstrap */
}

.carousel-caption p {
    font-size: 1em; /* small size since this is the default in Bootstrap */
    text-align:left;
}
@media (min-width: 576px) { // Small devices (landscape phones, 576px and up)
  .carousel-caption h3 { font-size: 1.3em;}
  .carousel-caption p {font-size: 1.1em;}  
}
@media (min-width: 768px) {// Medium devices (tablets, 768px and up)
  .carousel-caption h3 { font-size: 1.4em;}
  .carousel-caption p {font-size: 1.2em;}  
}
@media (min-width: 992px) { // Large devices (desktops, 992px and up)
  .carousel-caption h3 { font-size: 1.5em;}
  .carousel-caption p {font-size: 1.3em;}  
}
@media (min-width: 1200px) { // Extra large devices (large desktops, 1200px and up)
  .carousel-caption h3 { font-size: 1.6em;}
  .carousel-caption p {font-size: 1.4em;}  
}