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>
に、明確にするため。小さな画面で折り畳まれているときは、上から下、リスト、画像、リストの順番で表示されます。折りたたまれたときに画像を上に置く方法は?
[MCVE]を作成し、質問自体にスニペットを追加してください。 plnkrを編集したり削除したりすることができます。その時点で、あなたの質問は今後同じ問題を抱える将来の訪問者には役に立たなくなります。あなたが助けを得ている主要な理由は、少なくとも理論的には、将来の訪問者にもそのヘルプが配布されるからです。あなたが他人を助けるためにSOにいないのなら...それはOKだと思います。どちらも私たちではありません。 –
@AndreiGheorghiuあなたは正しいです。私は最後に他の友人が私にplnkrを追加してデモンストレーションを助けるよう依頼したので、そうしています。しかし、あなたはちょうど私にそれについてもっと教えてくれました。私は私の質問を編集します! – Zanecat