私はブートストラップnavbarを編集しようと多くの方法があります。実際には、色を変えたり、身長を衣装にしたりしていました。しかし、テキストは残っています。 this is the case.navbarのブートストラップの高さを変更してテキストを途中で保存する方法は?
答えて
EDIT:あなたは、ブートストラップから.navbar-default
にCSSプロパティmin-height
をオーバーライドする必要は50pxよりもナビゲーションバー以下にしたい場合は
。
注:
これはしかし、より小型のデバイスであなたのハンバーガーのメニューに影響します。あなたは.navbar default
でmin-height
を定義せず768px以上で、それは小さく、しかし、メディアクエリでそれをやって、このようなことができます:
@media (min-width:768px) {
.navbar-default {
min-height:30px;
}
}
SOLUTION:
あなたのナビゲーションバーのを変更します高さ、アンカーの垂直整列は、次のようにして行うことができます。
- 上部と下部のパッドfローマアンカー。
- アンカーの行の高さを、navbarの高さと同じ値に設定します。
コードスニペット:スタックオーバーフローに
.navbar-default {
height: 80px;
}
.navbar-default .navbar-nav > li > a,
.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 80px;
}
.navbar-form {
margin-top: 22px;
}
<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.6/js/bootstrap.min.js"></script>
<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">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
実際には高さを小さくしたいと思っています。 (ライン) - 高さが50ピクセル未満の場合、動作しません。 ところで、お返事ありがとうございました:) –
私があなたの求めるものを満足させるために私の答えを編集しました。それをチェックしてください。あなたのために働くことを願っています。 – Ricky
実際に高さ:80pxと線高さ:40pxを試しました。ナビゲーションバーの中央に配置されたテキスト –
- 1. ブートストラップnavbarの中央のテキスト
- 2. ビデオの途中から画像を保存する方法は?
- 3. 単一ページアプリケーションでNavbarのアクティブカラーを変更する方法[ブートストラップ]
- 4. ブートストラップ4 navbar - モバイルでの高さなし
- 5. divの途中でブートストラップ列を整列する方法は?
- 6. Bootstrap navbarの色を変更してnavbarの高さを減らします
- 7. ビューの途中でテキストを変更する
- 8. スムーズスクロールでオフセットを変更する方法navbarの高さでのJQueryアニメーション
- 9. ブートストラップnavbarでエンボスを変更する
- 10. navbarブートストラップのテキストを隠す
- 11. ブートストラップNavBar最大高さ
- 12. ブートストラップ3 Navbar Collapse - 特定のNavbarのブレークポイントを変更します。
- 13. ブートストラップ2 navbarブレークポイントの変更
- 14. angularjsを使用して保存中にボタン上のテキストを変更する
- 15. ブートストラップを使用してnavbarのフォント色を変更する
- 16. ブートストラップを無効にしてnavbarリンクの色を変更する
- 17. NSTextViewは行の途中でテキストを作る方法
- 18. ブートストラップアクティブメニューの変更Navbarの高さ
- 19. ブートストラップ4 navbarの高さの問題
- 20. ブートストラップを使用して途中でdivコンテンツを取得する方法
- 21. jQuery - Navbarの色の変更がスクロールで動作するユーザーがページを途中で更新しない限り
- 22. ブートストラップでnavbarの色を変更するには
- 23. ブートストラップでnavbarのボーダー半径を変更するには?
- 24. NavBarの高さが変更されたときにコンテンツのサイズを変更する方法
- 25. ブートストラップnavbar、完全な高さnavbar-collapseしかし奇妙なアニメーション
- 26. 設定を変更してボタンを保存する方法は?
- 27. 変更ブートストラップnavbar崩壊ブレークポイント
- 28. osmdroidのポリラインの途中にテキストを追加する方法
- 29. ブートストラップのモーダルヘッダの色を変更する方法(バックグラウンドとテキスト)
- 30. ローカルのリポジトリを更新し、変更を保存する方法
ようこそ!コードヘルプを求める質問には、質問自体に** ** [** Stack Snippet **](https://blog.stackoverflow.com/2014/09/introducing-runnable)で**それを再現するのに必要な最短コードを含める必要があります** -javascript-css-and-html-code-snippets /)。 [**最小限の完成度の高い検証可能なサンプルを作成する方法**](http://stackoverflow.com/help/mcve) –