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>

ブラウザウィンドウのサイズを変更すると、「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 で何とか画面幅をキャプチャし、.innerHtmlorで条件を設定します.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 に答える