Question

我遇到了引导程序的响应式标签问题（在此处找到：https://github.com/openam/bootstrap-responsive-tabs）基本上大多数情况下一切正常，直到它进入移动分辨率，此时标签变为可扩展面板。在此模式下，内容内容有点时髦，但主要问题是链接按钮不再有效。

你可以点击按钮，一切都没有发生;而在更大的分辨率下，按钮会将您带到google.com

非常感谢任何见解

可以在此处查看codepen：http://codepen.io/anon/pen/jEovqg

HTML：

<div class="container">    

<div class="tabbable tabs-left">

<ul id="myTab" class="nav nav-tabs">
<li class="active" role="presentation"><a href="#option1" data-toggle="tab">Option 1</a></li>
<li role="presentation"><a href="#option2" data-toggle="tab">Option 2</a></li>
<li role="presentation"><a href="#option3" data-toggle="tab">Option 3</a></li>


</ul>
<div id="myTabContent" class="tab-content" >

<div class="tab-pane fade in active" id="option1">
<h3>Heading
</h3>
<p>
Something goes here
</p>

<p><b>Key Features:</b>
<br>
blah, blah blah blah</p>

<a href="http://www.google.com" target="_blank">
<button type="button" class="btn btn-default">Learn more</button>
</a>

<!-- /.tab-pane fade -->
</div>


<div class="tab-pane fade" id="option2">
<h3>Heading2</h3>
<p>
Some other stuff here 
</p>
<p>
Hey
</p>
<a href="http://www.google.com" target="_blank">  
<button type="button" class="btn btn-default">Learn More</button>
</a>

<!-- /.tab-pane fade -->
</div>


<div class="tab-pane fade" id="option3">
<h3>Another Heading</h3>
<p>
Even more content
</p>
<a href="http://www.google.com.com/" target="_blank">  
<button type="button" class="btn btn-default">Learn More</button>
</a>   

<!-- /.tab-pane fade -->
</div>




<!-- /#myTabContent .tab-content -->  
</div>
<!-- /.tabbable tabs-left --> 
</div>

<!-- /.container -->
</div>

CSS：

.tab_area {
  width: auto;
  padding: 60px 0;
  background-color: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* line 797, ../sass/style.scss */
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

/* line 803, ../sass/style.scss */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

/* line 808, ../sass/style.scss */
.tab-content > .active,
.pill-content > .active {
  display: block;
}

/* line 813, ../sass/style.scss */
.tab-content p {
  font-size: 1em;
}

/* line 817, ../sass/style.scss */
.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

/* line 821, ../sass/style.scss */
.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

/* line 827, ../sass/style.scss */
.tabs-below > .nav-tabs > li > a {
  border-radius: none;
}

/* line 834, ../sass/style.scss */
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

/* line 840, ../sass/style.scss */
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

/* line 846, ../sass/style.scss */
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

/* line 851, ../sass/style.scss */
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

/* line 858, ../sass/style.scss */
.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

/* line 864, ../sass/style.scss */
.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  border-radius: 0;
  font-size: 1.2em;
  z-index: 100;
  /*-webkit-border-radius: 4px 0 0 4px;
   -moz-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;*/
}

/* line 874, ../sass/style.scss */
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

/* line 879, ../sass/style.scss */
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd transparent;
  *border-right-color: #ffffff;
}

/* line 886, ../sass/style.scss */
.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

/* line 892, ../sass/style.scss */
.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  /*-webkit-border-radius: 0 4px 4px 0;
   -moz-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;*/
}

/* line 899, ../sass/style.scss */
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

/* line 904, ../sass/style.scss */
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

/* line 912, ../sass/style.scss */
.panel-heading {
  padding: 0;
}

/* line 915, ../sass/style.scss */
.panel-heading a {
  display: block;
  padding: 10px 10px;
}

/* line 919, ../sass/style.scss */
.panel-heading a.collapsed {
  background: #f1f1f1;
}

/* line 922, ../sass/style.scss */
.panel-heading a {
  background: #ddd;
  border-radius: 5px;
}

/* line 926, ../sass/style.scss */
.panel-heading a:after {
  font-family: 'fontawesome';
  content: '\f078';
  float: right;
  -webkit-animation: rotateDownLeft .7s both ease;
  -moz-animation: rotateDownLeft .7s both ease;
  animation: rotateDownLeft .7s both ease;
}

/* line 934, ../sass/style.scss */
.panel-heading a.collapsed:after {
  font-family: 'fontawesome';
  content: '\f054';
  float: right;
  -webkit-animation: rotateUpLeft .7s both ease;
  -moz-animation: rotateUpLeft .7s both ease;
  animation: rotateUpLeft .7s both ease;
}

JS：

$('#myTab').tabCollapse();

Answer 1

这似乎是响应标签（JS）的一个问题，只要窗口宽度发生变化（至少在FireFox中），按钮标签就会放在a-tag之后而不是放在它内部。

但快速解决方案应该是将HTML更改为：

<a href="http://www.google.com.com/" target="_blank" class="btn btn-default">
    Learn More
</a>

而不是：

<a href="http://www.google.com" target="_blank">  
    <button type="button" class="btn btn-default">Learn More</button>
</a>

链接按钮在响应选项卡中不起作用

1 个答案: