Bootstrap删除按钮单击效果

Question

我一直在尝试找到我需要在Bootstrap中更改的相关css，以防止点击按钮时出现这种影响（参见附图）

任何帮助都会非常感激！

编辑：以下是相关代码：

    <div class="btn-group" dropdown container="body">
                        <button dropdownToggle type="button" class="btn dropdownToggle" style="background-color:#337ab7;color:white;">
                            Views <span class="caret"></span>
                        </button>
</div>

编辑2：我设法使用此代码删除边框：

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

但是，当我点击按钮时仍然有效果（见下图）：

是否也可以删除它？

Answer 1

您必须设置.btn:focus {outline: 0;}。如果您需要全局删除焦点，请使用此:focus {outline: 0;}

对于第二个问题，请使用

.btn.active, 
.btn:active {
   box-shadow: none;
}

Answer 2

很可能是默认大纲，这里是带有bootstrap 3.3.7的通用下拉示例，没有大纲：

＆＃13;

＆＃13;

button:focus {
  outline: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown 
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可能需要添加一行覆盖引导程序的css，例如：

button {
border:0!important;
}

Answer 4

您还必须删除阴影：

.btn.active, .btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}