Question

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

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

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

我尝试使用文字正确，但没有成功

<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>

Answer 1

请尝试使用简单的布局，因为您正在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>

在导航栏中放置两个图像，一个图像位于左侧，一个图像位于右侧

1 个答案: