web-dev-qa-db-ja.com

ブランドロゴをBootstrap 4 navbarの左端に設定するには？

以下に示すようなロゴがあります。

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>

ブートストラップは左側にパディングを追加し、エッジからの次のオフセットをもたらします。

enter image description here

私たちのロゴは切り取られた円であるため、実際の円のような錯覚を作成するためにEdgeに正確に配置し、ブラウザーの外側に貼り付けたいと考えています。左側に負のマージンを設定しようとしましたが、画像を移動するだけで、下に示すように奇妙なエッジを保持しています。

<img class="navbar-brand" src="logo.png" alt="logo" style="margin-left: 0px;">

enter image description here

私はそれについて何ができますか？

htmlcsstwitter-bootstrapbootstrap-4
8
Konrad Viltersten

container-fluidの代わりにrowを使用できます。これら2つのマージンは反対です。

https://jsfiddle.net/gsb3ohd2/

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="row">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>
5
Banzay

.navbar-brandと.container-fluid.navbar-containerの左のパディングを削除します（.container-fluidのスタイルをオーバーライドしたくないので、新しいクラスを追加します）。

[〜＃〜] html [〜＃〜]

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid navbar-container">
    <img class="navbar-brand" src="logo.png" alt="logo">
  </div>
</nav>

[〜＃〜] css [〜＃〜]

.container-fluid.navbar-container, .navbar-brand {
  padding-left: 0;
}

作業フィドル： https://jsfiddle.net/9t20dmLk/1/

3
Arun Kumar Mohan