为Bootstrap 3中的对齐选项卡创建css

我正在使用Bootstrap 3创建对齐选项卡。 对于每个选项卡，我希望地图图像如所附图像所示。无法查看地图图像

HTML:

---

请帮忙。

这会让你接近你想要的。它仍然需要您格式化一些片段，比如悬停效果，但是总体结构是为您准备的

我在Your's code中注意到的一个主要问题是链接上使用了

：active

。

：active

伪类仅用于在单击链接时定义样式。在这里，您实际上希望某些东西具有基于类的样式

.nav-tabs.nav-justified > li.active > a#America:active

相反，你应该做的是：

.nav-tabs.nav-justified > li.active > a#America

在HTML中，我修改了您尝试的方式。我已经为地图和地图文本添加了单独的标记。这样可以更容易地设置要分隔两个区域的线的样式。一旦我这样做了，我对你的CSS做了一些调整

<div style="height: 100px">
    <!--Space element just to get it off the panel splitter.-->
</div>
<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">
              <span class="map" id="America">&nbsp;</span>
              <span class="mapText">The Americas</span>
          </a>
      </li>
      <li role="presentation">
          <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
              <span class="map" id="Europe">&nbsp;</span>
              <span class="mapText">Europe</span>
          </a>
      </li>
      <li role="presentation">
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
              <span class="map" id="Asia">&nbsp;</span>
              <span class="mapText">Asia/Pacific</span>
          </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" id="Europe">Europe content</div>
      <div role="tabpanel" class="tab-pane" id="settings" id="Asia">Asia/Pacific content</div>
  </div>

</div>

---

这会让你接近你想要的。它仍然需要您格式化一些片段，比如悬停效果，但是总体结构是为您准备的

我在Your's code中注意到的一个主要问题是链接上使用了

：active

。

：active

伪类仅用于在单击链接时定义样式。在这里，您实际上希望某些东西具有基于类的样式

.nav-tabs.nav-justified > li.active > a#America:active

相反，你应该做的是：

.nav-tabs.nav-justified > li.active > a#America

在HTML中，我修改了您尝试的方式。我已经为地图和地图文本添加了单独的标记。这样可以更容易地设置要分隔两个区域的线的样式。一旦我这样做了，我对你的CSS做了一些调整

<div style="height: 100px">
    <!--Space element just to get it off the panel splitter.-->
</div>
<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">
              <span class="map" id="America">&nbsp;</span>
              <span class="mapText">The Americas</span>
          </a>
      </li>
      <li role="presentation">
          <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
              <span class="map" id="Europe">&nbsp;</span>
              <span class="mapText">Europe</span>
          </a>
      </li>
      <li role="presentation">
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
              <span class="map" id="Asia">&nbsp;</span>
              <span class="mapText">Asia/Pacific</span>
          </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" id="Europe">Europe content</div>
      <div role="tabpanel" class="tab-pane" id="settings" id="Asia">Asia/Pacific content</div>
  </div>

</div>

---

好的，这是你试图从现有的应用程序中重建的东西，还是你只是试图构建另一个网站的功能，而实际上没有做很多自己的工作？这可能需要使用一点jquery来切换图像，具体取决于单击的选项卡……好吧，这是您试图从现有应用程序中重建的内容，还是您只是试图构建另一个网站的功能，而实际上没有做很多自己的工作？这可能是通过一点jquery来完成的，根据点击的标签切换图像……感谢Nathan，它成功了：）只需要在css中做一些调整，以获得移动分辨率，因为蓝条并没有扩展100%。它在右手边留下了额外的空间。@MonicaMandal:很高兴听到它在工作。我没有测试任何移动浏览器，但我测试了响应性布局。我知道JSFIDLE欺骗了我，让我在做这件事的时候也有同样的想法。结果窗格右侧的JSFIDLE中有一个小缺口，但这不是输出的一部分。不确定这是否是您看到的，但如果是，可能会节省您几分钟的调试时间。感谢Nathan，它起了作用：）只需在css中对移动分辨率做一些调整，因为蓝条并没有扩展到100%。它在右手边留下了额外的空间。@MonicaMandal:很高兴听到它在工作。我没有测试任何移动浏览器，但我测试了响应性布局。我知道JSFIDLE欺骗了我，让我在做这件事的时候也有同样的想法。结果窗格右侧的JSFIDLE中有一个小缺口，但这不是输出的一部分。不确定这是否是您看到的，但如果是，可能会为您节省几分钟的调试时间。