【问题标题】:Add spacing between image and text in navbar - bootstrap在导航栏中添加图像和文本之间的间距 - 引导程序
【发布时间】:2020-12-18 20:43:13
【问题描述】:

我现在有这个网站,上面有这段代码:


<body>
    <nav class="navbar bg-primary">
        <div class="container-inline navbar-brand">
            <img src="img/logo.png"width="55">
            <a class="text-light">Test</a>
        </div>

        <a class="nav-link text-light">One</a>
        <a class="nav-link text-light">Two</a>
        <a class="nav-link text-light">Three</a>
        <a class="nav-link text-light">Four</a>
    </nav>
    <h1>Hello</h1>
</body>

我希望文本“测试”和徽标图像之间有更多间距,我已经尝试过 ml-3pl-3 等类似方法,但这些似乎都不起作用。,

【问题讨论】:

  • 我正在使用 bootsrtap 5 我很糟糕,我将如何在 bootstrap 5 中执行此操作?

标签: html web bootstrap-5


【解决方案1】:

将带有边距属性的样式应用于您的 img 元素,您可以调整像素

<img src="img/logo.png" width="55" style="margin-right:20px">

【讨论】:

  • 哦对了,用bootstrap不行吗?这就是我的困惑与引导程序有关的地方,我可以在哪里使用引导程序,而我不能
【解决方案2】:

您可以使用图像的margin属性和padding属性,并确保在显示尺寸发生变化时确认margin或padding。我认为你re trying to make responsive as well so margin of px doesnt 会随着显示尺寸的变化而变化。您正在使用引导程序。

class="navbar-brand"

为您的图像添加类,这将为您提供右边距。

【讨论】:

    【解决方案3】:

    在图像的 div 上,您可以添加 mr-5

    <div class="container-inline navbar-brand mr-5">
            <img src="img/logo.png"width="55">
            <a class="text-light">Test</a>
        </div>
    

    如果您不需要太多应该可以工作的空间。 mr 的范围为 1-5,因此请根据需要进行调整。

    【讨论】:

      【解决方案4】:

      Bootstrap 5 中不再有 ml-*。它已被 ms-* 取代。阅读changes from Bootstrap 4 to Bootstrap 5

      <div class="container-inline navbar-brand">
          <img src=".." width="55">
          <a class="text-light d-inline-block ms-3">Test</a>
      </div>
      

      Codeply

      【讨论】:

      • 我刚刚注意到我正在使用 bootstrap 5,抱歉,在 bootstrap 5 中如何做到这一点?
      • 请将答案标记为“已接受”,以便其他人知道问题已解决!