Bootstrap - 附近的图片滑块 |在下方添加文字

Question

我正在使用 bootstrap 3 在主图像旁边显示图像的侧面。

我想要做的是在中心图像下方添加文本。

现在，它不是放在预期图像（中心）下方，而是添加到下一张图像上方，如下所示：

我试过使用垂直对齐、清除和浮动都无济于事。

 <style> .item img {
   max-width: 100%;
 }
 .item img:first-child,
 .item img:last-child {
   display: none;
 }
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .item img {
     float: left;
     width: 600px;
   }
   .item img:first-child,
   .item img:last-child {
     display: block;
   }
   .item.active {
     overflow: hidden;
     margin: 0 -546px;
   }
 }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -434px;
   }
 }
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -330px;
   }
   </style>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">


        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
        <p style="vertical-align:bottom">asdasdasdas</p>


        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />



        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 1

将文本放在 div 的底部，然后使用 CSS 将其居中。如果您希望文本在中心图像下方的一侧对齐，您也可以给文本左右填充而不是居中。

<div class="item">
  <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
  <img src="http://dummyimage.com/600x400/000/fff" alt="" />
  <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
  <p class="words">Testing the words out.</p>
</div>

<style>
   .words{
      text-align:center;
   }
</style>

或

<style>
   .words{
      padding-LEFT:WIDTH_OF_LEFT_IMAGE;
      padding-right:WIDTH_OF_RIGHT_IMAGE;
   }
</style>

Answer 2

您最好的选择是将每个 img 包装在 div 中并使用 float: left。

但是如果你的文字不大，你可以把它放在最后 img 然后用 div.text-center 包裹起来。

检查下面的第一张幻灯片：

 <style> .item img {
   max-width: 100%;
 }
 .item img:first-child,
 .item img:last-child {
   display: none;
 }
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .item img {
     float: left;
     width: 600px;
   }
   .item img:first-child,
   .item img:last-child {
     display: block;
   }
   .item.active {
     overflow: hidden;
     margin: 0 -546px;
   }
 }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -434px;
   }
 }
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -330px;
   }
   </style>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">


        <img src="http://dummyimage.com/600x400/000/fff" alt="" />


        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />

        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

        <div class="text-center">
            <p style="vertical-align:bottom">asdasdasdas</p>
        </div>

      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Bootstrap - 附近的图片滑块 |在下方添加文字

Bootstrap - nearby images slider | adding text underneath

css

jquery

carousel

bootstrap-modal

twitter-bootstrap-3