วิธีทำให้ <button> ใน Bootstrap ดูเหมือนลิงค์ปกติใน nav-tabs?

ฉันทำงานใน (เดิมคือ Twitter) Bootstrap 2 และฉันต้องการจัดรูปแบบปุ่มให้เหมือนกับว่าเป็นลิงก์ปกติ ไม่ใช่แค่ลิงค์ธรรมดา ๆ แต่; สิ่งเหล่านี้จะอยู่ใน<ul class="nav nav-tabs nav-stacked">ภาชนะ มาร์กอัปจะลงเอยเช่นนี้:

<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>หรือไม่?

ตามที่ระบุไว้ในเอกสารอย่างเป็นทางการเพียงใช้ชั้นเรียน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>

ตัวอย่างเช่นด้วยรหัสที่คุณระบุ:

<link href="//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>

เพียงแค่ทำให้ลิงค์ปกติดูเหมือนปุ่ม :)

<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>

"บทบาท" ภายในโค้ด href ทำให้ดูเหมือนปุ่มคุณสามารถเพิ่มตัวแปรอื่น ๆ เช่นคลาสได้

เพียงเพิ่ม remove_button_css เป็นคลาสในแท็กปุ่มของคุณ คุณสามารถตรวจสอบรหัสสำหรับลิงก์ 1

.remove_button_css { 
  outline: none;
  padding: 5px; 
  border: 0px; 
  box-sizing: none; 
  background-color: transparent; 
}

แก้ไขรูปแบบพิเศษ

เพิ่มcolor: #337ab7;และ:hoverและ:focusเพื่อให้ตรงกับ OOTB (bootstrap3)

.remove_button_css:focus,
.remove_button_css:hover {
    color: #23527c;
    text-decoration: underline;
}

ใน bootstrap 3 สิ่งนี้ใช้ได้ดีสำหรับฉัน:

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

ใช้เช่น:

<button type="button" class="btn-link btn-anchor">My Button</button>

การสาธิต

เพียงกำจัดสีพื้นหลังเส้นขอบและเพิ่มเอฟเฟกต์โฮเวอร์ นี่คือซอ: http://jsfiddle.net/yPU29/

<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" class="button-link">Link 1</button></li>
    <li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
    <!-- ... -->
  </ul>
</div>
<!-- The actual form -->
<div class="span9">
  <!-- ... -->
</div>
</div>
</form>

CSS:

.button-link {
background-color: transparent;
border: none;
}

.button-link:hover {
color: blue;
text-decoration: underline;
}

ฉันลองใช้ตัวอย่างทั้งหมดแล้วโพสต์ที่นี่ แต่ใช้ไม่ได้หากไม่มี CSS เพิ่มเติม ลองสิ่งนี้:

<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>

ทำงานได้อย่างสมบูรณ์โดยไม่ต้องใช้ CSS เพิ่มเติม