html - Bootstrap 图像轮播，文本在右边

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>

我试过不使用 bootstrap 列而只使用左右浮动，但没有用。

Answer 1

根据您的图像模型，我假设您需要 75% 宽度的旋转木马，而主容器内的其他文本/div 剩余 25% 宽度。或者文本/div 应该在轮播之外。

如果是这种情况，请尝试使用此 -

1. 添加一个新类 carousel-left至 <div id="carousel-example-generic" class="carousel slide carousel-left" data-ride="carousel">

2. 在 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>

1. 在您的 CSS 中添加以下内容 -

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

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

希望对您有所帮助。