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

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>

当我调整浏览器 window 大小时，我的 "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>

Answer 2

您可以使用 Bootstrap 来完成:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="navigation">
    <ul class="row">
            <a href="#"><img class="col-xs-2 logo" src="img/logo.png"/></a>
            <a href="#" class=" col-xs-2"><li class="navOption">Navbar 1</li></a>
            <a href="#" class=" col-xs-2"><li class="navOption">Navbar 2</li></a>
            <a href="#" class=" col-xs-2"><li class="navOption">Navbar 3</li></a>
            <a href="#" class=" col-xs-4"><li class="navOption">Navbar Long Name 1</li></a>
    </ul>
</div>
</body>
</html>

Answer 3

不使用空格例如。 Navbar Long Name 1

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

How i can resize my browser without break the long values on the navbar?

html

javascript

css

jquery

responsive