Question

我必须将相同的文字放在三张放在自举转盘中的不同图片上。我的问题是如何在旋转木马内部响应此文本。你有什么技巧吗？

EDITED

我的问题被误解了。我的意思是我会有一个文本块，并让它在旋转木马内响应。例如，在destkop中旋转木马中心的文本必须保留在移动设备的中心

Answer 1

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

Answer 2

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

Answer 3

所有省略号都意味着插入您自己的值。

Bootstrap 2：

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

Bootstrap 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

您需要做的是使用媒体查询来调整较大显示单位的内容-ie：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：

＆＃13;

.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);
	}
}

＆＃13;

在转盘bootstrap里面的敏感文本

5 个答案: