Question

我正在使用bootstrap 3中的nav-pills在相应的标签上显示我的图片横幅。我希望在＆＃34; #contact-us＆＃34;上有一个无序列表。（企业，美洲/加勒比海，非洲/中东，欧洲，亚洲/澳大利亚）在横幅图像的顶部，并有文本和图像响应。我可以在图像顶部获取列表，但是一旦缩小浏览器，列表就会用完横幅图像。

在我的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>

从bootstrap导航丸图像顶部的文本

1 个答案: