我正在使用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 -->发布于 2015-05-16 06:04:08
也许你可以提供一个类似codepen的例子?使用这个作为基础:http://codepen.io/alogonzac/pen/vOKELp
<div class="banner-tabs">...</div>https://stackoverflow.com/questions/30269244
复制相似问题