twitter-bootstrap - 我如何将整个 Bootstrap 面板设置为超链接

Question

我正在使用 twitter bootstrap 的面板组件。我有以下代码

<div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6">
                        <i class="fa fa-comments fa-5x"></i>
                    </div>
                    <div class="col-xs-6 text-right">
                        <p class="announcement-text">My queue</p>
                    </div>
                </div>
            </div>
        </div>

我如何使整个面板成为超链接。就像我应该能够点击面板的任何部分，它应该导航到不同的页面。

在线示例显示将页脚设置为超链接，但我认为如果我可以将整个面板设置为超链接会更好。

我不想使用 metro.js。

谢谢。

Answer 1

只需将整个面板包装在一个 anchor 标记中。

 <a href="link.com">    
  <div class="panel panel-info">
    <div class="panel-heading">
      <div class="row">
        <div class="col-xs-6">
          <i class="fa fa-comments fa-5x"></i>
        </div>
        <div class="col-xs-6 text-right">
          <p class="announcement-text">My queue</p>
        </div>
      </div>
    </div>
  </div>
</a>