Question

好的，所以我试图让网页显示Bootstrap image carousel，这有效！但是我想要一些右边的文字。我并没有试图让图像随着图像而改变，只是偏向一边。

这是页面的HTML;
http://pastebin.com/EabGfv3H#

这是我使用的自定义CSS;
http://pastebin.com/MEtF1hTR

和JSFiddle;
http://jsfiddle.net/swfour/52VtD/3942/

JSFiddle链接所需的代码，所以这里是html;

<div class="container-fluid">
<div class="row">
    <div class="col-md-12">
        <div id="carousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li> 
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/Beaches and Villages\Golden Beach umbrellas home.JPG" alt="...">
                    <div class="carousel-caption">
                        Golden Beach
                    </div>
                </div>
                <div class="item">
                    <img src="images/Beaches and Villages\Limenas ancient city.jpg" alt="...">
                    <div class="carousel-caption">
                        Limenas
                    </div>
                </div>
                <div class="item">
                    <img src="images/Beaches and Villages\Potos sunset.JPG" alt="...">
                    <div class="carousel-caption">
                        Potos
                    </div>
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
            <div id="carousel_text" class="col-md-6">
        <div>
            <p>
                Thasos, an island surrounded by the crystal-clear emerald waters of the Aegean Sea is part of the Northeastern islands of 
                Greece, also being the closest one to the continent. It is the perfect getaway for holidays during summer, a place where 
                you can relax and enjoy your holidays, forget about all your worries on a quiet sandy beach, but also a place where you 
                can explore the Greek way of life, try the best foods and meet the most amazing people.
            </p>
        </div>
    </div>
</div>

我尝试过不使用自举列，只使用左右浮动，但没有用。

Answer 1

从您的图像模型中，我假设您需要宽度为75％的旋转木马，而另一个文本/ div在主容器中保持25％的宽度。或者text / div应该在旋转木马之外。

如果情况确实如此，请尝试使用 -

向carousel-left

<div id="carousel-example-generic" class="carousel slide carousel-left" data-ride="carousel">

在html中添加/更新text-div，如下所示：

<div class="bs-example" data-example-id="simple-carousel">

  <div id="carousel-example-generic" class="carousel slide carousel-left" data-ride="carousel">...</div>

  <div class="some-text">your text div</div>
</div>

在您的css中添加以下内容 -

.carousel-left { width: 75%; float: left; }

.some-text { float: left; width: 25%; }

希望它有所帮助。

Answer 2

我将pull-left类添加到img，并将pull-right类添加到您的文本中，并将其放在<span>而不是<div>内，并从中删除carousel-caption。似乎工作Pluncker

<div class="item">
      <img class="pull-left" src="images/Beaches and Villages\Limenas ancient city.jpg" alt="...">
      <span class="pull-right">
           Limenas
      </span>
</div>

Bootstrap图像轮播，右侧有文字

2 个答案: