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>