在Bootstrap中制作响应选项卡3

Question

我在bootstrap3中创建了一个响应式设计。 我想修改标签的模板设计。为此我使用外部js文件。

目前我打算只在桌面版中展示它们。我不确定如何在移动设备上产生同样的效果。现在只是dektop。

当我与Bootstrap3集成时，它无法正常工作。  但是使用没有bootstrap代码的普通html文件，它的工作正常。

是否有人能够使用Bootstrap3帮助我实现这一目标？

I have added the code in js fiddle @
http://jsfiddle.net/monicaRegal/do5b3ko3/1/

谢谢 问候， 莫妮卡曼达尔

Answer 1

如果您需要使用Bootstrap制作的标签扩展到页面的整个宽度或其容器，请在标记中使用nav-justified类。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

Body Content Here
<br />
<br />

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">The Americas</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Europe</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Middle East/Africa</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Asia/Pacific</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">The Americas content</div>
    <div role="tabpanel" class="tab-pane" id="profile">Europe content</div>
    <div role="tabpanel" class="tab-pane" id="messages">Middle East/Africa content</div>
    <div role="tabpanel" class="tab-pane" id="settings">Asia/Pacific content</div>
  </div>

</div>

然后，您可以根据需要设置标签样式。以完整页面模式查看代码段以正确查看。