引导标题位置

Question

我在这里有一个 jsfiddle - http://jsfiddle.net/gh4Lur4b/2/

这是一个引导轮播，每张幻灯片上都有标题。

我想更改标题的位置，使其与下方的红色块对齐，即引导容器块。我可以用 px 或 % 定位它，但在大 pr 小屏幕尺寸下看起来不合适。

我还希望内嵌文本并使用黑色背景。在示例中，我通过固定容器的宽度来完成它，这将不起作用，因为我不知道会有多少文本。

        .block{
            background: red;
            height: 200px;
        }

        .carousel-caption{
            font-size: 3em;
            left: 10%;
            text-align: left;
            background: black;
            color: white;
            display: inline;
            width: 200px;
            padding: 0;
        }

Answer 1

1.要将左边缘与红色块对齐，您可以将left: 0; 添加到您的班级.carousel-caption。所以标题会被定位到左边。

2.对于标题框的大小。无需在固定像素中设置大小。这个盒子有一个奇怪的宽度的原因是。 Bootstrap 中的 CSS 代码已经设置了规则right:15%;。这使得该框的右侧紧贴右边缘的 15%。它会自动拖动框的右边缘。因此，通过将right:auto; 添加到您的.carousel-caption 来删除此规则，并记住删除width:200px;。

Answer 2

您可以通过将样式 width: 46%; 和 margin-left: -153px; 放入 .carousel-caption 类来覆盖它。