タグ付けされた質問 「navbar」


10
左、中央、または右揃えのアイテムを備えたブートストラップNavBar
ではブートストラップ、右に左にロゴA、中央のメニュー項目、およびロゴBを持つナビゲーションバーを作成する最もプラットフォームフレンドリーな方法は何ですか? これが私がこれまでに試したものであり、ロゴAが左側に、メニュー項目が左側のロゴの隣に、ロゴBが右側にあるように配置されます。 <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> <li><a href="#contact">Menu Item 2</a></li> <li><a href="#about">Menu Item 3</a></li> …

29
Bootstrap 3 Navbarとロゴ
Bootstrap 3のデフォルトのナビゲーションバーを、テキストのブランド設定ではなく、イメージのロゴとともに使用したい。さまざまな画面サイズで問題を引き起こさずにこれを行う適切な方法は何ですか?これは一般的な要件だと思いますが、良いコードサンプルはまだ見ていません。すべての画面サイズで適切な表示ができること以外の重要な要件は、小さい画面でのメニューの折りたたみ性です。 navbar-brandクラスが含まれるAタグ内にIMGタグを挿入するだけで、メニューがAndroidフォンで正しく機能しなくなりました。また、navbarクラスの高さを上げてみましたが、それによってさらに混乱しました。 ちなみに、私のロゴ画像は、ナビゲーションバーの高さよりも大きくなっています。

21
ブートストラップ4は、navbarアイテムを右に揃えます
ナビゲーションバーのアイテムを右に揃えるにはどうすればよいですか? ログインして右に登録したいのですが。しかし、私が試みたすべてが機能していないようです。 これは私がこれまでに試したことです: <div>周辺の<ul>属性:style="float: right" <div>周辺の<ul>属性:style="text-align: right" <li>タグでこれら2つのことを試しました !important最後に追加してそれらすべてをもう一度試しました に変更さnav-itemれnav-rightました<li> にpull-sm-rightクラスを追加しました<li> にalign-content-endクラスを追加しました<li> これは私のコードです: <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …

26
Angular JSでブートストラップnavbarアクティブクラスを設定するにはどうすればよいですか?
アイテムのブートストラップにナビゲーションバーがある場合 Home | About | Contact 各メニュー項目がアクティブなときに、それらのアクティブクラスをどのように設定しますか?つまりclass="active"、角度ルートが #/ 家のために #/about アバウトページについて #/contact お問い合わせページ

11
レスポンシブブートストラップナビゲーションバーのコンテンツを中央に配置
コンテンツをブートストラップナビゲーションバーの中央に配置することに問題があります。私はブートストラップ3を使用しています。多くの投稿を読みましたが、使用したCSSまたはメソッドは私のコードでは機能しません!私は本当にイライラしているので、これは私の最後の選択肢のようなものです。何か助けていただければ幸いです! <!DOCTYPE html> <html> <head> <title>Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> …

18
LESSを使用せずにブートストラップナビゲーションバーの折りたたみブレークポイントを変更する
現在、ブラウザーの幅が768pxを下回ると、ナビゲーションバーは折りたたみモードに変わります。この幅を1000pxに変更したいので、ブラウザーが1000px未満になると、ナビゲーションバーが折りたたみモードに変わります。LESSを使用せずにこれを実行したいのですが、LESSではなくスタイラスを使用しています。 私の問題はこの質問と同じです:Bootstrap 3 Navbar Collapse しかし、その質問のすべての回答は、LESS変数を変更してそれを行う方法を説明しています。私はLESSを扱っていません。スタイラスを使用しているので、スタイラスまたは別の方法を使用してこれを行う方法を知りたいです。 ありがとう!

12
ブートストラップ3ナビゲーションバーの折りたたみ
ブートストラップ3のナビゲーションバーが折りたたまれるポイントを増やす方法はありますか(つまり、縦長のタブレットではドロップダウンに折りたたまれるようになります)? これら2つはブートストラップ2に適用可能でしたが、現在は適用できません。 Twitterブートストラップレスポンシブを使用してナビゲーションバーの折りたたみしきい値を変更する方法 デフォルトの応答性のあるナビゲーションバーのブレークポイントを変更する

13
Twitter Bootstrapでのnavbarの色
Twitter Bootstrap 2.0.2のナビゲーションバーの背景色を変更するにはどうすればよいですか?ナビゲーションバーのすべての要素の色を変更して背景色を反映するにはどうすればよいですか?

9
Twitterのブートストラップ2.1.0で新しいaffixプラグインを使用する方法
そのトピックに関するブートストラップのドキュメントは、少しわかりにくいです。ドキュメントのようにnavbarを付けて同様の動作を実現したい:navbarは段落/ページの見出しの下にあり、下にスクロールすると、最初にスクロールしてページの上部に到達し、そこに固定してさらにスクロールダウンします。 。 :jsFiddleは、ナビゲーションバーのコンセプトでは動作しませんので、私は、最小限の例として使用するために別のページを設定したhttp://i08fs1.ira.uka.de/~s_drr/navbar.html これをナビゲーションバーとして使用します。 <div class="navbar affix-top" data-spy="affix" data-offset-top="50"> <div class="navbar-inner"> <div class="container"> <div class="span12"> <a class="brand" href="#">My Brand</a> This is my navbar. </div> </div> <!-- container --> </div> <!-- navbar-inner --> </div> <!-- navbar --> 私data-offset-topは値0になりたいと思います(バーが一番上に「くっついている」はずですが、50では少なくともいくつかの効果が見られます。 JavaScriptコードも配置する場合: <script> $(document).ready (function (){ $(".navbar").affix (); }); </script> 助けてくれてありがとう。

9
ブートストラップ3.0ナビゲーションバーの高さの減少
上部固定の動作で使用されるブートストラップ3.0ナビゲーションバーの高さを下げようとしています。ここで私はコードを使用しています。 HTML <div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav pull-right"> <li class="active"> <a href="../getting-started">Getting started</a> </li> <li> <a href="../css">Ext01</a> </li> <li> <a …

6
ブートストラップ3-ナビゲーションバーの折りたたみを無効にする
これは私のシンプルなナビゲーションバーです。 <div class="navbar navbar-fixed-top myfont" role="navigation"> <div class=""> <ul class="nav navbar-nav navbar-left"> <li> <a class="navbar-brand" href="#"> <img src="assets/img/logo.png"/> </a> </li> <li> <button class="btn btn-navbar"> <i class="fa fa-edit"></i> Create </button> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li data-match-route="/"><a href="#/page-one">Login</a></li> <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li> </ul> </div> これが崩壊するのを防ぎたいのですが、それが必要ないので、どうすればいいですか? デフォルトのスタイルを上書きするために、CSSの300K行を書くことは避けたいです。 なにか提案を?

5
複数のページでナビゲーションバーを再利用するにはどうすればよいですか?
home /index.htmlページの作成が完了しました。ナビゲーションバーを現在の場所に維持し、ユーザーがすべてのページをクリックしている間、ナビゲーションバーを維持するため。ナビゲーションコードをコピーして各ページの上部に貼り付ける必要がありますか?それとも、きれいに見えるようにする別の方法はありますか? HMTLナビゲーション: <nav> <div> <a href="/"> <div id="logo"><img src="image.png" alt="Home"/></div> <div id="headtag"><img src="image.png" alt="Home"/></div> <div id="tagline"><img src="image.png" alt="Home"/></div> </a> </div> <div> <a href="/" class="here">Home</a> <a href="/about.html" >About</a> <a href="/services.html" >Services</a> <a href="/pricing.html" >Pricing</a> <a href="/contact.html" >Contact Us</a> <input id="srchbar" type="search" placeholder="Search"> </div> </nav>
84 html  navbar 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.