Question

在我的项目中，我使用bootstrap。

有四个Elems Cost，Custormer，问号和搜索按钮。

这是我的页面代码：

    <ul class="nav navbar-nav navbar-right">
        <li >
           <a href="#" >Cost</a>
        </li>
        <li >
           <a href="customerCenter.php" >Customer</a>
        </li>
        <li >
          <button type="button" class="btn btn-default" >
          <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
          </button>
        </li>
    </ul>
    <form class="navbar-form navbar-right" role="search">
        <button type="submit" class="btn btn-default">
           search
        </button>
    </form>

现在我想要glyphicon-question-sign按钮没有背景颜色，而它是白色的btn-default。

我曾尝试使用btn-inverse代替btn-default，但不幸的是它失败了。

另一个问题是glyphicon-question-sign按钮与成本和客户不在同一水平线上。

我希望成本，客户，字形问号，搜索的四个元素在同一水平线上。

谁能帮帮我？

Answer 1

首先，您需要将一个班级应用于相关按钮然后，您可以将background: transparent应用于该类以删除白色背景。

至于要使事情成为一致，你只需要提供元素display: inline-block。

请注意，由于<form>具有相当多的默认样式，因此它将与按钮重叠。您可能希望通过给它float: right来抵消这一点。您也可能希望通过将此值恢复为margin-top来抵消8px的固有0。

最后，请注意navbar-nav和navbar-form添加15px的左/右边距。您可能希望将这些偏移恢复为0。

这可以在以下内容中看到：

.btn.transparent {
  background: transparent;
}

.nav, ul.nav > li, .navbar-form {
  display: inline-block;
}

form.navbar-form {
  margin-top: 0;
  margin-right: 0;
  float: right;
}

ul.navbar-nav {
  margin: 7.5px 0;
}

<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav navbar-nav navbar-right">
  <li>
    <a href="#">Cost</a>
  </li>
  <li>
    <a href="customerCenter.php">Customer</a>
  </li>
  <li>
    <button type="button" class="btn btn-default transparent">
      <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
    </button>
  </li>
</ul>
<form class="navbar-form navbar-right" role="search">
  <button type="submit" class="btn btn-default">
    search
  </button>
</form>

Answer 2

<span class="glyphicon glyphicon-question-sign" aria-hidden="true" id="id-of-item">

和css

#id-of-item{
 color:#ffa500;
 display:inline-block;
}

这会将glyphicon的颜色定义为＃ffa500（橙色），并根据需要将其显示为内联。在这种情况下，您可以将glyphicons视为文本。

如何在引导程序中使用纯背景颜色更改按钮

2 个答案: