来自bootstrap nav-pills的图像顶部的文本

Question

我正在使用bootstrap 3中的nav-pills在相应的选项卡上显示我的图像横幅。我想有一个“#联系我们”(公司，美洲/加勒比海，非洲/中东，欧洲，亚洲/澳大利亚)上的横幅图像上的无序列表，并有文字和图像，以响应。我可以将列表放在图像的顶部，但是一旦我缩小浏览器，列表就会用完横幅图像。

我需要在我的css中做什么，才能使我的文本即使在缩小图像时也能留在横幅中？

下面是我的html。提前感谢！

 <div class="banner-tabs">
    <div class="container">
      <ul class="nav nav-pills tab-titles" id="pills-first">
        <li><a href="#about-us" data-toggle="pill">About Us</a></li>
        <li><a href="#careers" data-toggle="pill">Careers</a></li>
        <li class="active"><a href="#contact-us" data-toggle="pill">Contact Us</a></li>
      </ul> <!-- nav nav-pills -->  
    </div> <!-- container -->

    <!-- Content -->
    <div class="tab-content">
      <div class="tab-pane" id="about-us">
        <img src="../images/delete-1.png" class="tab-banner" />
      </div> <!-- about us -->

      <div class="tab-pane" id="careers">
        <img src="../images/delete-2.png" class="tab-banner" />
      </div> <!-- careers -->

      <div class="tab-pane active" id="contact-us">
        <img src="../images/delete-1.png" class="tab-banner">
          <div class="continents">
            <p>Click to view:</p>
            <ul>
              <li id="corporate"><a>Corporate</a></li>
              <li id="americas-caribbean"><a>Americas/Caribbean</a></li>
              <li id="africa-middle-east"><a>Africa/Middle East</a></li>
              <li id="europe"><a>Europe</a></li>
              <li id="asia-australia"><a>Asia/Australia</a></li>
            </ul>
          </div> <!-- continents -->
     </div>
   </div> <!-- row -->
 </div> <!-- corporate-content -->

Answer 1

也许你可以提供一个类似codepen的例子？使用这个作为基础：http://codepen.io/alogonzac/pen/vOKELp

<div class="banner-tabs">...</div>