在引导选项卡中的图像下方放置一个标题

Question

我在我的网站上设置了标签部分，一切正常。问题在于标题不会位于图像下方。以下是代码片段和图片，以便您查看问题。

<div class="container">
 <div class="row">
  <div class="col-lg-12">

<!--- Tabs Navagation
---------------------------->
<ul class="nav nav-tabs" id="tabs">
 <li class="active"><a href="#tab1" data-toggle="tab">Cities</a></li>
 <li><a href="#tab2" data-toggle="tab">Education</a></li>
 <li><a href="#tab3" data-toggle="tab">Restaurants</a></li>
</ul>

<!--- Tab Sections
---------------------------->
<div class="tab-content">

 <div id="tab1" class="tab-pane active">
   <div class="thumb-caption">
    <a href="#"><img src="app/img/tabs/Belo Horizonte.jpg" alt="..."></a>
    <caption align="bottom">Belo Horizonte</caption>
   </div>
   <a href="#"><img src="app/img/tabs/Brasília (2).JPG" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Cuiabá (2).JPG" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Curitiba.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Fernando de Noronha_2.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Fortaleza (1).jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Iguazu Falls.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/IlhaGrande_Praia Lopes Mendes.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Manaus- Amazonas.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Natal (3).jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Porto Alegre (3).jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Recife Antigo.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Rio de Janeiro.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/Salvador 3.jpg" alt="..."></a>
   <a href="#"><img src="app/img/tabs/sao pablo.jpg" alt="..."></a>
  </div>

 <div id="tab2" class="tab-pane">
   <img src="">  
 </div>

 <div id="tab3" class="tab-pane">
   <p>this is text of tab 3</p>
  </div>
  </div>
 </div>
 </div>
   </div>

和CSS：

.tab-pane img {
max-width: 100px;
height: 100px;
padding: 10px;
float: left;
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
margin-bottom: 20px;
}

.tab-pane img:hover {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */

 } 

所以，如果你们可以帮助我，那将是很棒的，因为我多年来一直在摸我的头，我知道它正盯着我的脸。

Answer 1

如果你测试

.thumb-caption { border: 1px solid red; }

你会看到为什么标题的行为与它一样。浮动img旁边有足够的空间。

会像

.thumb-caption { width: 120px; }

工作？

您可能还想考虑在<img>内构建每个<div class≈"thumb-caption>，以便所有内容都正常排列。