Question

我试图做某种新闻提要，我希望转盘包含图像和文字，图像应该显示在左侧，文本在右边显示如下：

此刻我已经做了很多改变，我不知道该怎么做才能像我想的那样展示它，这是显示我当前工作的图像：

这是我的代码：

rollback=true

PS：抱歉我的英语不好，以及油漆技巧：D

Answer 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>

或者按照演示脚本进行操作：

＆＃13;

<!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;

Bootstrap转盘左侧带有动态文本

1 个答案: