如何让Bootstrap中的一个< button>看起来像导航标签中的普通链接?

iibxawm4  于 8个月前  发布在  Bootstrap
关注(0)|答案(8)|浏览(97)

我正在使用Bootstrap 2(以前的Twitter),我想将按钮的样式设置为普通链接。但不只是普通的链接;这些将被放入<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>

e5nqia27

e5nqia271#

只是使常规链接看起来像按钮:)

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

“role”里面的一段href代码让它看起来像button,ofc你可以添加更多的变量比如class。

oug3syen

oug3syen2#

只需将remove_button_css作为class添加到按钮标记中。您可以验证链接1的代码

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

额外样式编辑

添加color: #337ab7;:hover:focus以匹配OOTB( Bootstrap 3)

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

irtuqstp3#

在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>

Demo

krugob8w

krugob8w4#

只是摆脱了背景颜色,边界和添加悬停效果。这里有一个小提琴: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;
}
8mmmxcuj

8mmmxcuj5#

我已经尝试了所有的例子,张贴在这里,但他们不工作,没有额外的CSS。试试这个:

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

完美的工作,没有任何额外的CSS。

piwo6bdm

piwo6bdm6#

在react-bootstrap中,

<Button
  variant="link"
  className="text-start shadow-none"
  onClick={onClick}
>
  My Button
</Button

shadow-none在单击后摆脱突出显示。text-start停止文本居中。

vs3odd8k

vs3odd8k7#

下面是一个例子:

<form method="POST" > 
  <button type="submit" class=" linkish  my-1 far fa-thumbs-down fa-2x">  </button>

  <button type="submit" class=" linkish  btn btn-primary">click me</button>

</form>

CSS风格:

.linkish {
    background-color: transparent!important;
    border: 0!important;
    color: blue!important;
    cursor: pointer!important;
    display: inline!important;
    margin: 0!important;
    outline: none!important;
    padding: 0!important;
    text-decoration: none!important;
}


.linkish:hover {
 text-decoration: underline!important;
}

这只是一个例子,并根据您的情况/需求进行更改。
希望这对你有帮助。

w8biq8rn

w8biq8rn8#

如官方文档中所述,只需应用类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>

相关问题