Question

我需要一个简单的文字轮播，如下所示。旋转木马上没有任何图像。只是文字。现在它似乎很好，但旋转木马控制，箭头和两侧的灰色边缘不适合阅读所以我试图将文本居中，我无法做到这一点。我使用了“块中心”类以及在carousel-content类中尝试了push，pull以及行和容器的各种组合。还没有成功。

下面是我的代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="my-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#my-carousel" data-slide-to="1"></li>
                    <li data-target="#my-carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#1</h3>
                                <p>Proin at elementum sapien. Nam in sapien egestas, tempor sem in, porta diam. Integer bibendum tincidunt accumsan. Praesent ultrices metus ut urna vulputate, vel egestas tortor accumsan. Etiam nec dolor tempor, aliquet metus aliquet, scelerisque leo. Nunc in eros et nisl scelerisque bibendum. Suspendisse viverra dui in odio pretium rhoncus. Suspendisse dolor libero, laoreet et feugiat ac, lobortis et ipsum. Etiam lacus ipsum, vestibulum quis consequat sed, molestie vitae lectus. Praesent eu sapien vel risus iaculis rhoncus et et mi.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#2</h3>
                                <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lorem quam, blandit sed laoreet non, scelerisque eu est. Fusce non urna vel ligula ultrices scelerisque. Cras non venenatis libero. In hac habitasse platea dictumst. Cras mattis ligula ac mauris aliquet condimentum. Quisque accumsan posuere accumsan. Nam facilisis lectus posuere nisi dignissim dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam interdum purus accumsan justo fermentum, id vulputate nibh luctus. Maecenas gravida elit in nulla sollicitudin, eu egestas ipsum luctus.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#3</h3>
                                <p>Donec consequat eget nisi quis volutpat. Cras vitae tellus dui. Sed bibendum quam eget tempus luctus. Donec laoreet, diam ut condimentum malesuada, libero nisi feugiat nulla, a convallis ante urna a sem. Vivamus eget nibh et nunc iaculis varius. Nam in nunc velit. Quisque id lacinia lorem, ut dictum ipsum. Nullam eu fermentum dui, eget elementum massa. Duis tincidunt eros et euismod porta. Curabitur consectetur, ligula ac blandit maximus, nisl nunc luctus arcu, ornare rhoncus neque urna non neque. Donec in quam non nunc sollicitudin accumsan. Phasellus accumsan sit amet nibh nec suscipit. Donec eget congue nisi, sollicitudin feugiat odio. Donec congue diam orci, in eleifend nulla pharetra in. Integer felis lacus, facilisis id pharetra non, facilisis ut quam.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#my-carousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#my-carousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

Demo

Answer 1

在引导程序CSS

之后添加以下样式集

.carousel-inner {
  padding-left: 15%;
  padding-right: 15%;
}

或者如果你想在LESS中想要查找的变量是@ carousel-control-width。所以

.carousel-inner {
  padding-left: @carousel-control-width;
  padding-right: @carousel-control-width;
}

两者都是等效的，他们从两侧推送内容的空间与轮播控件占用的空间一样多。

如何在bootstrap carousel中居文本？

1 个答案: