どのようにしてブラウザのサイズを変更することができますか？

はちょうどその、私は私がブラウザウィンドウのサイズを変更すると、私の「ナビゲーションバーのロング名1」がブレーク行を取得してから脱出、どのようにしてブラウザのサイズを変更することができますか？

<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>

を3つの短い値を持つナビゲーションバーと長い1つを得ましたdivまたはdivのサイズが変更され、配置されません。私が使用してしようと試み：

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

をしかし、内容が書き換え中得るために空でなければなりませんように思えます。

今jqueryのか、JSで何とか画面幅をキャプチャし、.innerHtmlまたは.val()で条件を設定するために、タグ

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

を使用することを考えイム。しかし、多分私はoverthinkingとoverflow:auto;またはそのようなものでコンテンツを尊重するCSSの方法があります。

たぶん、あなたはあなたがコンテンツ

の.desktopのみと.mobileのみを以下に使用されているを切り替えることができるように、ヘルパークラスで、いくつかのメディアクエリを追加することができます私に事前

出典

2016-04-08 Jnewbie

colクラスにはどのようなCSSフレームワークを使用していますか？ – dmoo

先頭へ – Manish62

@Manishはどのような違いがありますか？ – Jnewbie

で感謝を助けることができます。

あなたはそれを行うには、ブートストラップを使用することができます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-08 11:56:21 dmoo

あなたの時間のために、完璧、ありがとう！ – Jnewbie

を参照してください：

代わり

<!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-08 12:09:36 Manish62

あなたの答えはありがたいですが、問題は解決しましたが、最短の幅「NavbarLongName1」が壊れた行にリサイズしたときにスニペットに表示されるように問題は解決しません。 abreviatureを配置するためのコンテンツ。私の悪い英語のため申し訳ありません – Jnewbie

スペースの使用例： Navbar Long Name 1

出典

2016-04-08 12:10:24

'＆nbsp'は、ブラウザがそれを中断させないようにしますか？ – Jnewbie

はい、表示がインラインブロックの場合 –

どのようにしてブラウザのサイズを変更することができますか？

答えて

関連する問題