Question

我想将twitter引导程序轮播的标题文本对齐到右侧。我怎么能这样做？

<div class="carousel-inner">
    <div class="item active">
        <img src="img/img1.png" alt="" class="img-responsive">
        <div class="carousel-caption right-caption">
            This is the text I want to put on the right.
        </div>
     </div>
 </div>

Answer 1

尝试用文本右侧包装文本。

<div class="carousel-inner">
    <div class="item active">
        <img src="img/img1.png" alt="" class="img-responsive">
        <div class="carousel-caption right-caption text-right">
            This is the text I want to put on the right.
        </div>
     </div>
</div>

Answer 2

如果我能对此有更深入的了解：

将text-right添加到carousel-caption div不起作用，因为carousel-caption有一个当前的文本对齐CSS样式，将其设置为居中。

这个CSS块出现在Bootstrap样式的text-right类之后，因此添加text-right不会覆盖carousel-caption样式。

我认为这是错误的，因为text-left，text-center和text-right类应该添加!important来覆盖任何内容。

更改文字对齐方式的唯一方法是为carousel-caption创建自己的CSS样式。

.carousel-caption {
    text-align: right;
}

如果您仍想将text-right添加为类，并使用它，则需要将其添加到自定义CSS块中：

.carousel-caption.text-right {
    text-align: right;
}

如何在自举轮播中将标题文本对齐？

2 个答案: