javascript - 我如何在不破坏导航栏上的长值的情况下调整浏览器的大小？

Question

就是这样，我得到了一个包含 3 个短值和一个长值的导航栏，

<div id="navegation" class="col-12 col-m-12">
    <ul class="none col-12-block col-m-12-block">
            <a href="#" class="col-3"><img class="logo" src="img/logo.png"/></a>
            <a href="#"><li class="navOption col-2">Navbar 1</li></a>
            <a href="#"><li class="navOption col-2 col-m-2">Navbar 2</li></a>
            <a href="#"><li class="navOption col-2">Navbar 3</li></a>
            <a href="#"><li class="navOption col-2">Navbar Long Name 1</li></a>
    </ul>

当我调整浏览器窗口大小时，我的“Navbar Long Name 1”得到一个中断行并从 div 中退出，或者 div 调整大小并取消定位。我尝试使用:

    @media only screen and (min-width: 660px) {
 .navOption{ content:"short stuff" }}

但似乎内容必须为空才能重写。

现在我正在考虑使用标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用 jquery 或 js 以某种方式捕获屏幕宽度，并使用 .innerHtml 或 .val() 设置条件。但也许我想多了，有一种 css 方法可以使用 overflow:auto; 或类似的东西来尊重内容。

也许你能帮我提前致谢

Answer 1

您可以使用辅助类添加一些媒体查询以允许您切换内容

.desktop-only 和 .mobile-only 在下面使用。

参见 http://codepen.io/dmoojunk/pen/LNerPm

@media only screen and (min-width:992px) {
  .desktop-only {
    display: block !important;
  }
  .mobile-only {
    display: none !important;
  }
}

@media only screen and (max-width: 991px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#" class="desktop-only">Navbar Long Name 1</a></li>
        <li><a href="#" class="mobile-only">Navbar Short</a></li>
      </ul>
    </div>
  </div>
</nav>