防止可折叠的导航栏在图像下包裹？

Question

我正在尝试防止折叠的导航栏环绕在图像下方。一旦分辨率小于476px，导航栏就会自动换行。我尝试在<nav>标记中使用d-sm-inline-block，但是它继续包装。

我附上一张图片，显示代码在做什么。我还从代码中删除了我正在使用的图像，因为我是在Django模板中构建图像的。

使用Bootstrap4

<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

    <img class="img-fluid picture-padding" src="temp" alt="temp">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
</nav>

Answer 1

如果我正确理解了您的问题的上下文，则好像您正在尝试将徽标添加到基于响应的Bootstrap 4的模板中。如果我的假设正确，请替换以下行：

v = (pow(g,s) * pow(b,-h)) % p

使用：

<img class="img-fluid picture-padding" src="temp" alt="temp">

应该完成您想要的。

以下是完整的bootstrap 4模板页面代码：

<a class="navbar-brand" href="#">
    <img src="temp" width="30" height="30" alt="">
</a>

以下是移动结果：

这是桌面结果：