2

就这样，我得到了一个导航栏，其中包含 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>

当我调整浏览器窗口的大小时，我的“导航栏长名称 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 以某种方式捕获屏幕宽度并使用 or 设置.innerHtml条件.val()。但也许我想多了，有一种CSS方式来尊重内容overflow:auto;或类似的东西。

也许你可以帮助我提前谢谢

4

3 回答 3

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>

于 2016-04-08T11:56:21.270 回答
0

您可以使用 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>

于 2016-04-08T12:09:36.267 回答
0

代替空格使用例如。 Navbar&nbsp;Long&nbsp;Name&nbsp;1

于 2016-04-08T12:10:24.677 回答