對齊Bootstrap旋轉木馬圖像

我使用Bootstrap旋轉木馬來顯示圖像及其各自的標題。圖像可以是人像，風景。對齊Bootstrap旋轉木馬圖像

我能夠正確顯示轉盤中的橫向圖像，其標題如下。在縱向圖像的情況下，我試圖將中心圖像對齊到右側，使其不與標題重疊。我更改了文件bootstrap.min.css中的CSS屬性，但它不起作用。

CSS代碼 ...

.carousel-inner { 
    position: relative; 
    align: right; 
    width: 100%; 
    overflow: hidden;

任何想法如何使肖像形象的權利，而不會影響其他2個圖像？

obj參數包含圖像src，標題的詳細信息。這些值由被調用到後端服務的ajax函數返回。

HTML代碼..

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.3.min.js"></script> 

<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
    <div id="carouselObject"> 
      <div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds--> 
       <div class="carousel-inner" role="listbox" id="carouselinner"> 

       </div> 

       <a class="left carousel-control" href="#/carousel-example-generic" role="button">    <!--data-slide="prev"--> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span> 
        <span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#/carousel-example-generic" role="button">    <!--data-slide="next"--> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 
     </div>

來源

2016-02-05 Lucy

你能做一個小提琴嗎？ – Raviteja

我已創建代碼筆類似的圓盤傳送帶滑塊。看一下它可能對你有幫助。

<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="carosel-example"> 
    <div id="carousel-example-captions" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li> 
    <li data-target="#carousel-example-captions" data-slide-to="2" class=""></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div class="item active"> 
    <img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg"> 
     <div class="carousel-caption"> 
     <h3>First slide </h3> 
     <p> ContentContentContentContentContentContent</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg"> 
     <div class="carousel-caption"> 
     <h3>Second slide</h3> 
     <p>Content</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg"> 
     <div class="carousel-caption"> 
     <h3>Third slide</h3> 
     <p>Content</p> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div>

///// CSS代碼放在這裏

.carousel-caption { 
    color: #000; 
    }.carosel-example, .new-caption-area { 
width: 600px; 
margin: auto; 
color: #000; 
}

////////////// JS代碼

jQuery(function ($) { 
$('.carousel').carousel(); 
var caption = $('div.item:nth-child(1) .carousel-caption'); 
$('.new-caption-area').html(caption.html()); 
caption.css('display', 'none'); 

$(".carousel").on('slide.bs.carousel', function (evt) { 
    var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption'); 
    $('.new-caption-area').html(caption.html()); 
    caption.css('display', 'none'); 
}); 
});

http://codepen.io/srinivasr/pen/EPdxKG

來源

2016-02-05 07:05:02

我旋轉木馬中的3個方格中的每一個都是300x300。我只想將中心圖像（人像）在300x300方格的右側對齊，而不改變其他圖像的對齊方式。因此，中間圖像的標題將位於300x300平方的左側，並且它的圖像位於右側..任何想法如何做到這一點？ – Lucy

可以請你分享一下你的代碼，或者你可以做一個小提琴！ –

我編輯了我的問題並添加了代碼。請看一下。 – Lucy

對齊Bootstrap旋轉木馬圖像

回答

相關問題