如何删除引导按钮中的小蓝线？答案

【问题标题】：How to remove the small blue line in bootstrap buttons?如何删除引导按钮中的小蓝线？
【发布时间】：2021-03-02 18:05:19
【问题描述】：

我想删除删除按钮左侧的小蓝线

这是代码：

<ul class="list-group">
            {{range $i, $page := .pages}}
              <li class="list-group-item list-group-item-action list-group-item-dark d-flex justify-content-between align-items-center">
                {{$page.Title}}
                <span class="justify-content-end">
                  <a href="/page/{{$page.ID}}/show">
                    <button type="button" class="btn btn-dark me-1">
                      Edit
                    </button>
                  </a>
                  <a href="/page/{{$page.ID}}/delete">
                    <button type="button" class="btn btn-danger">
                      Delete
                    </button>
                  </a>
                </span>
              </li>
            {{end}}
          </ul>

有什么建议吗？

【问题讨论】：

您提供的代码 sn-p 未显示问题（删除了您的服务器的字段）。您能否提供在浏览器中查看的页面中足够的代码，以便可以复制问题？
这可能是链接默认获得的下划线格式。但是在 HTML 中一开始就不允许将button 放入a，因此您应该首先在此处修复损坏的 HTML。
我解决了这个问题：a { text-decoration: none !important; }
@BlackGopher 查看我的最后一部分答案

标签： css bootstrap-4

【解决方案1】：

如您所见，text-decoration“问题”

没有：

a:hover{
   text-decoration: none!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="list-group">
            
              <li class="list-group-item list-group-item-action list-group-item-dark d-flex justify-content-between align-items-center">
                <span class="justify-content-end">
                  <a href="/page/{{$page.ID}}/show">
                    <button type="button" class="btn btn-dark me-1">
                      Edit
                    </button>
                  </a>
                  <a href="/page/{{$page.ID}}/delete">
                    <button type="button" class="btn btn-danger">
                      Delete
                    </button>
                  </a>
                </span>
              </li>
          </ul>

与：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="list-group">
            
              <li class="list-group-item list-group-item-action list-group-item-dark d-flex justify-content-between align-items-center">
                <span class="justify-content-end">
                  <a href="/page/{{$page.ID}}/show">
                    <button type="button" class="btn btn-dark me-1">
                      Edit
                    </button>
                  </a>
                  <a href="/page/{{$page.ID}}/delete">
                    <button type="button" class="btn btn-danger">
                      Delete
                    </button>
                  </a>
                </span>
              </li>
          </ul>

正如@CBroe 写的评论，总是用有效的html很好地调整代码

正确版本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="list-group">
            
              <li class="list-group-item list-group-item-action list-group-item-dark d-flex justify-content-between align-items-center">
                <span class="justify-content-end">
                  <a href="/page/{{$page.ID}}/show" type="button" class="btn btn-dark me-1">
                      Edit
                  </a>
                  <a href="/page/{{$page.ID}}/delete" type="button" class="btn btn-danger">
                      Delete
                  </a>
                </span>
              </li>
          </ul>

如您所见，我将 <a> 更改为 button 类型，因此现在您无需下划线或手动更改 css 即可获得相同的结果。

【讨论】：

评论的最后一部分。是的，我试过了，它确实有效，它实际上更好，但这样做很好，我的意思是正常吗？
最后一部分是使用好的html并达到预期结果的最佳方式
请将其标记为帮助所有有相同问题的社区的答案:)

【解决方案2】：

解决办法是：

a {
  text-decoration: none !important;
}

我认为蓝色的小线是删除单词的下划线。

【讨论】：