CSS twitter-bootstrap：当鼠标悬停在 <a> 标签内的 btn-group 上时，如何去掉带下划线的按钮文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11828829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an <a>-tag?
提问by BerndBrot
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
使用下面的标记，将鼠标悬停在按钮文本上时会带有下划线。我怎样才能摆脱这种行为？
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
有没有更好的方法在引导程序中添加指向 btn-group 的链接来避免这种行为？
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
测试的 CSS 行：
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
任何额外的 !important 也不起作用（由 baptme 建议）。
回答by baptme
{ text-decoration: none !important}
{ text-decoration: none !important}
EDIT 1:
编辑 1：
For you example only a{text-decoration: none}will works
对你来说，例子只会a{text-decoration: none}起作用
You can use a class not to interfere with the default behaviour of <a>tags.
您可以使用一个类来不干扰<a>标签的默认行为。
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
CSS：
.nounderline {
text-decoration: none !important
}
回答by Mick
Bootstrap 4+
引导程序 4+
This is now easy to doin Bootstrap 4+
这在 Bootstrap 4+ 中很容易做到
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
回答by Rehno Lindeque
Buttons with the btnclass do not have underlines unless you are doing something wrong: In this case nesting <button>inside of <a>?.
btn除非您做错了什么，否则类的按钮没有下划线：在这种情况下，嵌套<button>在<a>? .
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
我认为您可能正在尝试做的事情是创建一个没有任何装饰（下划线、轮廓、按钮边框等）的引导按钮。换句话说，如果您的锚点不是超链接，它在语义上就是按钮。
Bootstrap's existing btnclass appears to be the correct way to remove underline decorations from anchor buttons:
Bootstrap 的现有btn类似乎是从锚按钮中删除下划线装饰的正确方法：
Use the button classes on an
<a>,<button>, or<input>element
使用按钮类上
<a>，<button>或<input>元素
EDIT:Hitesh points out that btnwill give you a shadow on :active. Thanks! I have modified my first example to use btn-linkand incorporated the accepted answer's text-decoration: noneto avoid this problem. Note that nesting a button inside of an anchor remains malformed html?, a point which isn't addressed by any of the other answers.
编辑：Hitesh 指出这btn会给你一个阴影:active。谢谢！我修改了我的第一个示例以使用btn-link并合并已接受的答案text-decoration: none以避免此问题。请注意，在锚点内嵌套按钮仍然是格式错误的 html ？，其他任何答案都没有解决这一点。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
<a href="#" class="btn btn-link" style="text-decoration: none">Text</a>
<a href="#" class="btn btn-link" style="text-decoration: none">Text</a>
</div>Alternatively, for a regular button group using anchors:
或者，对于使用锚点的常规按钮组：
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
<a href="#" class="btn btn-default">Text</a>
<a href="#" class="btn btn-default">Text</a>
</div>In other words, it should not be necessary to introduce your own However, be aware of certain subtleties.nounderlineclass and/or custom styling as the other answers suggest.
换句话说，没有必要但是，请注意某些微妙之处。nounderline像其他答案所建议的那样引入您自己的类和/或自定义样式。
?According to the HTML5 spec, <a><button>..</button></a>is illegal:
? 根据HTML5 规范，<a><button>..</button></a>是非法的：
Content model:Transparent, but there must be no interactive contentdescendant.
内容模型：透明，但不得有交互式内容后代。
...
...
Interactive contentis content that is specifically intended for user interaction.
a,audio(if the controls attribute is present),button,embed,iframe,img(if the usemap attribute is present),input(if the type attribute is not in the hidden state),keygen,label,object(if the usemap attribute is present),select,textarea,video(if the controls attribute is present)
交互式内容是专门用于用户交互的内容。
a，audio（如果该控件属性存在）， ，button，embed，iframe（img如果USEMAP属性存在），input（如果该类型属性不是在隐藏状态）， ，keygen，label（object如果USEMAP属性存在）， ，select，textarea（video如果控件属性存在）
P.S. If, conversely, you wanted a button that hasunderline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
PS，相反，如果您想要一个带有下划线装饰的按钮，您可能已经使用了btn-link. 然而，这应该很少见——这几乎总是一个锚点而不是一个按钮！
回答by Bhojendra Rauniyar
Why not just apply nav-linkclass?
为什么不直接申请nav-link课程？
<a href="#" class="nav-link">
回答by Jossef Harush
a.btn {
text-decoration: none;
}
回答by Luke Flournoy
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
问题是你的目标是按钮，但它是导致文本装饰的 A 标签：下划线。所以如果你定位 A 标签，那么它应该可以工作。
a:hover, a:focus { text-decoration: none;}
回答by Alex
If you are using Less or Sass with your project, you can define the link-hover-decorationvariable (which is underlineby default) and you're all set.
如果您在项目中使用 Less 或 Sass，您可以定义link-hover-decoration变量（underline默认情况下），然后就全部设置好了。
回答by ARTniyet
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
回答by Mamé
Easy way to remove the underlinefrom the anchor tag if you use bootstrap. for my case, I used to like this;
如果您使用引导程序，从锚标记中删除下划线的简单方法 。就我而言，我曾经喜欢这个；
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
回答by namnh
.btnis the best way, in modern website, it's not good while using anchor elementwithout hrefso make the anchor tagto buttonis better.
.btn是最好的方式，在现代的网站，而使用它并不好anchor element没有href那么做anchor tag，以button更好。
