Question

这是我第一次使用CSS和Bootstrap。如图所示，我希望将文本TEST的绿色变为绿色，以将其应用于所有黄色突出显示的矩形。我怎样才能做到这一点？另外，我想在单击test1和test2时切换活动颜色。

我的代码如下

<nav class="navbar navbar-dark">
    <div class="container-fluid">
        <div class="row-fluid">
            <nav class="col-md-11">
                <span class="navbar-header">
                    <a href="/test/" class="navbar-item">
                        <img class="some-class"
                             src="<myUrl>">
                    </a>
                <a tooltip-placement="bottom" uib-tooltip="${some-text}" class="navbar-brand-test" href="<myUrl>">TEST</a>
                </span>
                <ul class="nav navbar-nav">
                    <li class="test1"><a href="<myUrl>" >Test1</a></li>
                    <li class="test1"><a href='<myUrl>' >Test2</a></li>
                </ul>
            </nav>
        </div>
     </div>
</nav>

用于navbar-brand-test的CSS，我刚刚更新了现有代码：

.navbar-brand-test,
.navbar-brand-test:hover,
.navbar-brand-test:focus {
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  letter-spacing: 0.05em;
  padding: auto;
  margin: auto;
  color: #fff;
  background-color: #5fc17c;
  white-space: nowrap;
}

当我按照下面的答案中TKD21的建议进行操作时，它起作用了，但是正如您在第二张图片中看到的那样，BG collor也填充了徽标（第二张图片中的黄色部分）。我希望徽标与该BG颜色分开

Answer 1

最后，下面的代码发挥了作用。 TKD21的答案的略微修改版本。将徽标网址移至col-md-11下面，并添加了div而不是span

<nav class="navbar navbar-dark">
    <div class="container-fluid">
        <div class="row-fluid">
            <nav class="col-md-11">
              <a href="/test/" class="navbar-item"><img class="some-class"src="<myUrl>">
              </a>
                <div class="col-md-1 navbar-header" style="background-color: #5fc17c;">
                <a tooltip-placement="bottom" uib-tooltip="${some-text}" class="navbar-brand-test" href="<myUrl>">TEST</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="test1"><a href="<myUrl>" >Test1</a></li>
                    <li class="test1"><a href='<myUrl>' >Test2</a></li>
                </ul>
            </nav>
        </div>
     </div>
</nav>

现在唯一的问题是，当我单击Test1或Test2时，每个选项卡均应激活绿色。解决后会在这里更新

Answer 2

如果我正确理解了您的问题，您希望将文本“ TEST”的绿色背景应用于所有黄色三角形，是吗？

如果确实如此，请考虑执行以下操作：

将您的<span class='navbar-header'>更改为<span class='col-md-1 navbar-header'>，并添加您选择的颜色类别或样式规则
将您的<span class='navbar-header'></span>更改为<div class='col-md-1 navbar-header'></div>，并添加您选择的颜色类别或样式规则

尽管这两种解决方案看似相同，但第二种解决方案不太可能在调整窗口大小时发生破坏。

如果您需要更大的绿色背景尺寸，只需使用col-md-<number> Bootstrap类。

我的测试结果可以看到here

bootstrap 3增加文本背景颜色大小并在每个选项卡上切换

2 个答案: