Bootstrap image carousel，文本位于右侧
Bootstrap image carousel，文本位于右侧
提问于 2015-08-31 17:30:38
好的，所以我正在尝试让一个网页显示一个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列，而只使用浮动向左和向右，这不起作用。
Stack Overflow用户
回答已采纳
发布于 2015-08-31 18:16:04
从你的图片模型来看，我假设你需要一个大约75%的宽度的carousel，而其他的text/div在你的主容器中保持25%的宽度。或者text/div应该在carousel之外。
如果是这样的话，试着用这个-
如下所示，添加一个新的carousel-left类来将您的-
- 转换为
carousel-left
<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%; }
希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32308033
复制相关文章
相似问题
腾讯云开发者
