css - Bootstrap 字幕位置

Question

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

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

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

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

        .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. 要将左边缘与红色 block 对齐，您可以将 left: 0; 添加到您的类 .carousel-caption 中。因此标题将位于左边缘。

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