我试图做某种新闻提要,我希望转盘包含图像和文字,图像应该显示在左侧,文本在右边显示如下:
此刻我已经做了很多改变,我不知道该怎么做才能像我想的那样展示它,这是显示我当前工作的图像:
这是我的代码:
rollback=true
PS:抱歉我的英语不好,以及油漆技巧:D
答案 0 :(得分:1)
更新您的轮播项目html结构,希望能够解决您的问题:
<div class="item active">
<div class="col-md-8 col-sm-8 col-xs-8">
<img alt="..." class="pull-right" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQs8gHxXxlSYqXQficLOI-N0ibkh0XX97-0vYgakpSb3y9zTFpIOg">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span class="pull-right">
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.
</span>
</div>
</div>
或者按照演示脚本进行操作:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row spacing2">
<h3 id="Noticias">Notícias</h3>
<div class="col-md-12">
<div class="carousel slide spacing2" data-ride="carousel" id="carousel" style="width: 400px; margin-left:100px">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel"></li>
<li data-slide-to="1" data-target="#carousel"></li>
<li data-slide-to="2" data-target="#carousel"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-md-8 col-sm-8 col-xs-8">
<img alt="..." class="pull-right max-img-width" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQs8gHxXxlSYqXQficLOI-N0ibkh0XX97-0vYgakpSb3y9zTFpIOg">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span class="pull-right">
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.
</span>
</div>
</div>
<div class="item">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU55m5PgXoLiEGWOl5a3aPIF4SQMiM-mYcIhg4-ac1YcrO0gTI" alt="Flower" >
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span class="pull-right">
The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing).
</span>
</div>
</div>
</div><!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#carousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
</div>
</div>
<div class="col-md-6" id="carousel_text">
<div>
<p></p>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;