如何在Bootstrap走马灯中将标题文本右对齐？

Question

我想将Twitter Bootstrap旋转木马的标题文本右对齐。我该怎么做？

<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>

- SALAMAT Med Ayman

Answer 1

尝试使用class为text-right来包裹您的文本。

<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>

- 0xburned

Answer 2

如果我能给出更多见解：

将text-right添加到carousel-caption div中将不起作用，因为carousel-caption已经设置了当前的text-align CSS样式为居中。

在Bootstrap样式中，这个CSS块出现在text-right类之后，所以添加text-right将无法覆盖carousel-caption样式。

在我看来，这是错误的，因为text-left、text-center和text-right类应该添加!important来覆盖任何东西。

您唯一可以更改文本对齐方式的方法是创建自己的CSS样式以覆盖carousel-caption。

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

---

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

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

- Lee