时间戳

首页 > 解决方案 > 在导航栏中放置两张图片，一张在左边，一张在右边

css - 在导航栏中放置两张图片，一张在左边，一张在右边

问题描述

我需要使用两张图片，一张是公司徽标，另一张是应用程序徽标。

所以我创建了这个导航栏，我的想法是在每一侧放置一个图像，看看它的外观。

但是，我无法移动导航栏中图像的位置，我该怎么做？

我尝试正确的文本，但没有成功

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <div class="row">
            <div class="col-md-6 text-center">
                <img src="~/Content/img/logo_1_v_.png" width="30" alt="">
            </div>
            <div class="col-md-6 text-right ">
                <img src="~/Content/img/logo_2_v_.png" width="30" alt="">
            </div>
        </div>        
    </a>
</nav>

标签： csstwitter-bootstrapbootstrap-4

解决方案

尝试使用简单的布局，因为您正在嵌套一行，navbar-brand可能是这样的：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="#" width="30" height="30" alt="Image Logo">
  </a>
  
  <a class="app-image float-right">
    <img src="#" width="30" height="30" alt="App Image">
  </a>
</nav>

如果您没有使用 Bootstrap 4，只需添加.app-image {float: right;}

这只是一种方法，您可以通过多种方式实现这一点，这取决于您想要的结果，另一种方式是使用 flex ：

.navbar {
  display: flex;
  justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="#" width="30" height="30" alt="Image Logo">
  </a>
  
  <a class="app-image">
    <img src="#" width="30" height="30" alt="App Image">
  </a>
</nav>

推荐阅读