Question

当用户更改屏幕宽度时如何更改导航菜单中的文字？

我试试：

            <li>
                <p class="navbar-text visible-lg underline">Contacts & Delivery</p>
                <p class="navbar-text hidden-lg underline">Contacts</p>
            </li>

它的工作，但文本开始文本向上移动。我可以使用标签＆＃39; a＆＃39;来修复它。相反＆＃39; p＆＃39;，但我不会在导航菜单中链接。

Answer 1

如果我理解你的问题，在Bootstrap的CSS之后附加以下CSS代码时应该修复它：

.navbar-text { margin-left: 15px; margin-right: 15px; }

当您使用Less：

时

.navbar-text {
  margin-left: @navbar-padding-horizontal;
  margin-right: @navbar-padding-horizontal;
}

另见：https://github.com/twbs/bootstrap/pull/15239

<强>更新从https://github.com/twbs/bootstrap/pull/15239开始，您不应使用.navbar-text内的li或任何其他标记。上述解决方案的另一种选择是保持.navbar-text按预期，将为li中的文本创建一个新类

<强>少

.navbar-nav-text {
  &:extend(.nav > li > a);
  &:extend(.navbar-nav > li > a);
  p& {
    margin: 0;
  }
}
.navbar-default {
    .navbar-nav-text {
        color: @navbar-default-color;
    }
}
.navbar-inverse {
    .navbar-nav-text {
        color: @navbar-inverse-color;
    }
}

或 css

.navbar-nav-text {
  position: relative;
  display: block;
  padding: 10px 15px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .navbar-nav-text {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

p.navbar-nav-text {
  margin: 0;
}
.navbar-default .navbar-nav-text {
  color: #777777;
}
.navbar-inverse .navbar-nav-text {
  color: #9d9d9d;
}

当用户更改屏幕宽度时如何更改导航菜单中的文本？ Bootstrap 3

1 个答案: