2017-07-28 5 views
0

Bootstrap3 <nav>を使用していますが、サンプルコードでチームはnavbar-toggle collapsedクラスを使用して、小さな画面でnavbarの要素を折りたたんでいます。Bootstrap3では、ナビゲーションバーの折りたたまれた要素の順序を変更するにはどうすればよいですか?

私の質問は、折りたたまれたときの順番を変更する方法です。 私は短いスニペットを作っ:

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 
    <nav class="navbar navbar-default"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false"> 
     <span class="sr-only">Options</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <ul class="nav navbar-nav collapse navbar-collapse"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
    </ul> 

    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="BRAND" src="some/img.png"> 
     </a> 
    </div> 


    <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
    </ul> 
    </nav> 
</body> 
</html> 

リスト、画像、別のリストがあり、左から右に、私の<nav>に、明確にするため。小さな画面で折り畳まれているときは、上から下、リスト、画像、リストの順番で表示されます。折りたたまれたときに画像を上に置く方法は?

+0

[MCVE]を作成し、質問自体にスニペットを追加してください。 plnkrを編集したり削除したりすることができます。その時点で、あなたの質問は今後同じ問題を抱える将来の訪問者には役に立たなくなります。あなたが助けを得ている主要な理由は、少なくとも理論的には、将来の訪問者にもそのヘルプが配布されるからです。あなたが他人を助けるためにSOにいないのなら...それはOKだと思います。どちらも私たちではありません。 –

+0

@AndreiGheorghiuあなたは正しいです。私は最後に他の友人が私にplnkrを追加してデモンストレーションを助けるよう依頼したので、そうしています。しかし、あなたはちょうど私にそれについてもっと教えてくれました。私は私の質問を編集します! – Zanecat

答えて

1

最も簡単な方法は、ブランドhtmlを2回作成して、xsで表示可能にし、もう1つをxsで非表示にすることです。

visible-xsおよびhidden-xsクラスを、ナビゲーションバーが折りたたまれているときに表示または非表示にするコンテナに追加することで、これを行うことができます。

JavaScriptを追加することなく、ブランドイメージを両方の場所に表示することができます。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false"> 
 
    <span class="sr-only">Options</span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 

 
    <ul class="nav navbar-nav collapse navbar-collapse"> 
 
    <li class="dropdown"> 
 
     <div class="navbar-header visible-xs"> 
 
     <a class="navbar-brand" href="#"> 
 
      <img alt="BRAND" src="some/img.png" /> 
 
     </a> 
 
     </div> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
     <i class="fa fa-bars" aria-hidden="true"></i> 
 
     <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">LINK1</a></li> 
 
     <li><a href="#">LINK2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 

 
    <div class="navbar-header hidden-xs"> 
 
    <a class="navbar-brand" href="#"> 
 
     <img alt="BRAND" src="some/img.png" /> 
 
    </a> 
 
    </div> 
 

 
    <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hi! User<span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#"> Profile</a></li> 
 
     <li><a href="#"> Feedback</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#"> Log Out</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

+0

ありがとう、それは私が欲しいものです。ブランドを常に表示するように私は1つの変更を行いました。 https://codepen.io/anon/pen/brVgyd – Zanecat

+0

ああクール - それはさらに良いです:) –

+0

btw、あなたは下にスクリプトを置く、それは大会ですか? – Zanecat

関連する問題