对齐引导轮播图像答案

【问题标题】：Align Bootstrap Carousel Image对齐引导轮播图像
【发布时间】：2016-05-15 00:20:48
【问题描述】：

我正在使用 Bootstrap 轮播来显示图像及其各自的标题。图片可以是纵向、横向。

我能够在旋转木马中正确显示风景图片，并在下方显示标题。在纵向图像的情况下，我试图将中心图像向右对齐，使其不与标题重叠。我更改了文件 bootstrap.min.css 中的 CSS 属性，但它不起作用。

CSS 代码...

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

知道如何在不影响其他 2 个图像的情况下将肖像图像向右对齐吗？

obj参数是包含图片src，caption详细信息。这些值由被调用到后端服务的 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>

【问题讨论】：

你能做个小提琴吗？

标签： javascript html css twitter-bootstrap carousel

【解决方案1】：

我已经为类似的轮播滑块创建了代码笔。看看一次它可能对你有帮助。

   <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

【讨论】：

我的轮播中的 3 个方格中的每一个都是 300x300。我只希望中心图像（人像图像）在 300x300 正方形的右侧对齐，而不改变其他图像的对齐方式。所以中间图像的标题将在 300x300 正方形的左侧，它的图像在右侧..知道怎么做吗？
我已经编辑了我的问题并添加了代码。请看一看。