web-dev-qa-db-ja.com

Bootstrap navbarの各アイテム間のスペースを変更する

ナビゲーションバーの各リンクの間に大きなスペースを作成して、リンクをさらに離すにはどうすればよいですか？ CSSまたはHTMLを変更するものですか？ htmlにnavbarを実装した方法は次のとおりです。

<div class="navbar-wrapper">
<div class="container">
    <div class="navbar navbar-static-top" role="navigation">
    <div class="container full-width">
    <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
        <a class="navbar-brand" href="#"></a>
     </div>
     <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home_page">Home</a></li>
            <li><a href="#about_page">About</a></li>
            <li><a href="#portfolio_page">Portfolio</a></li>
            <li><a href="#contact_page">Contact</a></li>
        </ul>
     </div>
     </div>
     </div>
</div>
</div>
htmlcsstwitter-bootstrapnavbar
36
user2953989

プロパティpaddingを使用して、CSSでこれを変更できます。

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

また、marginを設定できます

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}
53
DaniP

bootstrap=グリッド要素のパディングまたはマージンを変更すると、画面幅がより低いポイントでオーバーフロー要素が作成される可能性が高いことを覚えておいてください。

その場合は、CSSメディアクエリを使用し、それを処理できる画面幅のマージンのみを含めることを忘れないでください。

作業中のフレームワークのモバイルファーストアプローチ（ブートストラップ）を維持するには、処理できない幅で除外するのではなく、処理できる幅でパディングを追加することをお勧めします。

@media (min-width: 992px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
}
27
Joe Sinfield

Bootstrap 4の時点で、 spacingユーティリティ を使用できます。

たとえば、px-2のクラスにnav-itemを追加して、パディングを増やします。

15
loopasam

この回答に示されているように、均等にスペースを空けることをお勧めします here

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}
0
Rami Alloush