web-dev-qa-db-ja.com

Bootstrap 4：ロゴがナビゲーションバーの高さを上げるときにナビゲーションリンクを垂直に揃える

Bootstrap 4フレームワークは初めてですが、StackOverFlowに関するすべてのドキュメントと既存のB4の質問をすべて読んだ後でも、まだ少し行き詰まっています。

ナビゲーションバーに、高さと幅が50pxのSVGロゴを挿入しました。これにより、ナビゲーションバーが自動的に高くなります。このためにCSSを調整していません。ナビゲーションバーの高さを強制的に上げるのは、ロゴだけです。

これが私のHTMLです：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>@yield('title')</title>
    <link rel="import" href="elements.html">
    <link rel="stylesheet" href="/styles/app.css">
</head>
<body>
    <header class="navbar navbar-light navbar-fixed-top bd-faded">
        <div class="clearfix hidden-sm-up">
            <button class="navbar-toggler pull-right" data-toggle="collapse" data-target="#navbar">
                    &#9776;
                </button>
            <a href="/" class="navbar-brand">
                <img src="/images/brand.svg" alt="Logo">
                <span>Bootstrap</span>
            </a>
        </div>
        <div class="collapse navbar-toggleable-xs" id="navbar">
            <a href="/" class="navbar-brand">
                <img src="/images/brand.svg" alt="Logo">
                <span>Bootstrap</span>
            </a>
            <nav class="nav navbar-nav">
                <div class="nav-item nav-link"><a href="#">Link 1</a></div>
                <div class="nav-item nav-link"><a href="#">Link 2</a></div>
                <div class="nav-item nav-link"><a href="#">Link 3</a></div>
            </nav>
        </div>
    </header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="/scripts/vendor.js"></script>
    <script src="/scripts/bootstrap.js"></script>
    <script src="/scripts/app.js"></script>
    <script src="/components/webcomponentsjs/webcomponents.js"></script>
</body>
</html>

これが私のカスタムCSSです：

.navbar-brand {
    font-size: 22px;
    img {
        display: inline-block;
        margin-right: 8px;
        width: 50px;
        height: 50px;
    }
}

link1、link2、＆linkのナビゲーションリンクをBootstrapのタイトルに垂直に揃えたいのですが。

よろしくお願いします

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
9
Paper9oll

リンクから上下のパディングを削除して、高さと行の高さを追加できると思います。また、.navbar-brandからパディングを削除します。

このCSSを追加するだけです：

.navbar-brand {
  padding: 0;
}
.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 50px;
  line-height: 50px;
}

[〜＃〜] codepen [〜＃〜]

4
max

ナビゲーションアイテムを垂直方向に配置したいという同様の状況に遭遇しました。

ステップ1：クラスd-lg-flex align-items-centerを.navbar-nav親要素に追加します。これにより、flex-utilitiesを使用して子アイテムを整列できるようになります

ステップ2：各子h-100にnav-itemクラスを追加します。 Nav-itemには、私が知っている定義された高さがありません。 nav-itemの定義された高さを使用すると、align-items-centerによって上記で設定されたフレックスルールに従います。

ステップ3：ナビゲーションバーには追加のjsが必要なため、コードペンの外部リンクを確認してください。

これは、垂直方向に中央に配置されたnav-itemsの実際の例です https://codepen.io/b3bold/pen/rvMwzN

<nav class="navbar navbar-expand-md p-3 mb-2 navbar-light bg-white text-dark">   
  <a class="navbar-brand" href="#">
    <img src="https://i.stack.imgur.com/snRuy.jpg" />
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto text-center w-100 justify-content-between ml-lg-0 d-lg-flex align-items-center">
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
      <div class="nav-item h-100"><a class="nav-link"href="#">Some Really Long Link as an Example of Vertical </a></div>
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
    </ul>
  </div>
</nav>
2
Alexander Romero