Question

我使用Bootstrap 3 Carousel制作图像幻灯片，并在图像右侧显示一些文字。

有没有人做过这样的事情？任何意见都将不胜感激。

图片供参考：

这是我到目前为止所做的，但看起来Bootstrap的CSS正在妨碍我自己的CSS。

.linebreak {
    display: none;
}
.image {
    float: left !important;
    margin-left: 20px !important;
}
.text {
    width: 45% !important;
    float: right !important;
    right: 14px !important;
    top: 43px !important;
    margin-right: 20px !important;
    margin-top: 20px !important;
    text-align: center !important;
}
.carousel-inner {
    overflow: auto;
}
.carousel img {
    border-radius: 0px;
    width: 0px;
}

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">
                        <img class="image" src="https://www.nd.gov/itd/sites/itd/files/legacy/images/o365-logo-square.png" alt="Los Angeles">
                        <div class="text">
                            Office 365 is the brand name Microsoft uses for a group of subscriptions that provide productivity software and related services.
                        </div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div> 
    </div>
</div>

Answer 1

可能在伪代码中进入旋转木马应该是这样的：

    <div class="carousel-inner">
  <div class="item active">
    <img class="image" src="la.jpg" alt="Los Angeles" style="width:100%;">
    <div class="text">BLABABABABABABABABABABABABABABBAABBA</div>
  </div>

你的风格应该是这样的：

image {
 float: left;
 width: 55%;
}
.text {
width: 45%;
float: right;
right: 14px;
top: 43px;
 }

Bootstrap轮播与图像右侧的文本

1 个答案: