ブートストラップナビのボタンの高さを変更できません

Question

ウェブサイトのブートストラップバージョンをブートストラップ4にアップロードすることを決めました。アップデート後、ブートストラップが新しいバージョンと大きく変わったため、私のウェブサイトのほとんどのコード。彼らが追加したたくさんの新しいクールなクラスのため、私はまたnavbarを書き直さなければならなかった。

navbarは完全に機能しますが、高さに関連するいくつかの問題があります。私はnavbarの高さを変更することができますが、子要素はnavbarの完全な高さを使用しており、私はそれを気に入っていません。あなたは、私が同じライン上の2つの異なるNAV年代を使っ見ることができるように、私は最初のものが好き

<nav class="navbar navbar-toggleable-sm bg-custom"> 
      <div class="container no gutters"> 
      <button class="navbar-toggler" data-toggle="collapse" data-target="#nav"> 
       <i class="fa fa-bars" aria-hidden="true"></i> 
      </button> 
      <div class="collapse navbar-collapse" id="nav"> 
       <ul class="navbar-nav mr-auto"> 
       <a class="nav-item nav-link active" href="#">Link1</a> 
       <a class="nav-item nav-link" href="#">Link1</a> 
       <a class="nav-item nav-link" href="#">Link1</a> 
       <a class="nav-item nav-link" href="#">Link1</a> 
       </ul> 
       <ul class="navbar-nav social list-inline"> 
       <a class="butn py-1" href="#">Link1</a> 
       <div class="align justify-content-center"> 
        <a class="list-inline-item" href="#about"><i class="fa fa-facebook-square" aria-hidden="true"></i></a> 
        <a class="list-inline-item" href="#services"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
        <a class="list-inline-item" href="#contact"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
       </div> 
       </ul> 
      </div> 
      </div> 
     </nav> 

が、2番目の1でフルを取っているボタンは、もあります。たとえば、私はこのコードを持っていますnavbarの高さと私はそれを変更するように見えることはできません。

ここでライブバージョン：http://tanely.anweb.ee

私は、ドキュメントから何かを見逃しているかもしれませんが、フレキシボックスは、私がしたいように私は高さを変更できないということらしいです。私はボタンが親の高さを使用しないようにしたい、代わりに、それは要素の高さを使用する必要があります、この場合、それはbutnのクラスを持つ要素です。

私は別の高さを設定しようとしました、パディング、マージンを変えて、フレックスボックスのプロパティ（親のために）などを混乱させようとしましたが、まだそれは私を助けません。

私は多分、あなたのうちの何人かがそれをチェックして、少し教えると思っていました。

Answer 1

フレックスの親のフレックスアイテムのデフォルトの高さは「ストレッチ」なので、それはあなたが見ているものです。しかしあなたのHTMLは無効です。 liのみがulの直接の子になることができます。そのaをliにラップすると、無効なHTMLの一部が修正され、liが「伸びる」となり、aがその自然な高さになります。

<ul class="navbar-nav social list-inline"> 
    <li><a class="butn py-1" href="#">Link1</a></li> 
    ...