Question

我想创建一个按钮，其中只有可见的文字用Font Awesome制作：

HTML

SmtpClient smtpClient = new SmtpClient();
smtpClient.Send(msgMail);

我强迫所有边框，背景等透明：

CSS

<button class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <i class="fa fa-bars"></i>
</button>

好吧，除非我点击按钮，否则效果很好。然后显示默认的蓝色Bootstrap边框。如何使所有类似按钮的功能变得透明，但在悬停事件中保持文本突出显示（更改为蓝色）？我曾尝试将.btn { outline: none; border: 0px; box-sizing: none; background-color: transparent; }添加到CSS文件中，但无效。

这是JSFiddle。水平调整大小。单击右侧带有条形的按钮，可以看到我需要消失的蓝色边框。

Answer 1

由于您正在重写Bootstrap类，因此您很可能需要更加具体地遵循规则。见Specificity

CSS示例：

.navbar .navbar-toggle,
.navbar .navbar-toggle:focus {
  outline: none;
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

工作示例：

.navbar .navbar-header .navbar-toggle,
.navbar .navbar-header .navbar-toggle:focus {
  outline: none;
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="menu">
  <nav class="navbar navbar-fixed-top">
    <div class="container">

      <div class="navbar-header">
        <button class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <i class="fa fa-bars"></i>
        </button>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">A</a>
          </li>
          <li><a href="#">B</a>
          </li>
          <li><a href="#">C</a>
          </li>
          <li><a href="#">D</a>
          </li>
          <li><a href="#">E</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

完全透明的Bootstrap按钮但仍然有效

1 个答案: