如何使< button>在Bootstrap看起来像一个正常的链接在导航标签？

问题描述

我在（以前的Twitter）Bootstrap 2中工作，我想把按钮设置为正常链接。不只是任何正常的链接;这些是在< ul class =nav nav-tabs nav-stacked> 容器中。标记将结束如下：

I'm working in (formerly Twitter) Bootstrap 2 and I wanted to style buttons as though they were normal links. Not just any normal links, though; these are going in a <ul class="nav nav-tabs nav-stacked"> container. The markup will end up like this:

<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li><button type="submit" name="op" value="Link 1">Link 1</button></li>
        <li><button type="submit" name="op" value="Link 2">Link 2</button></li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Bootstrap有办法让这些< button> 看起来像他们实际上是< a> s？

Does Bootstrap have any way to make these <button>s look like they were actually <a>s?

推荐答案

，只需应用课程， btn btn-link ：

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

例如...使用您提供的代码：

For example...with the code you have provided:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
        </li>
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
        </li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

这篇关于如何使< button>在Bootstrap看起来像一个正常的链接在导航标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！