在导航栏中添加图像和文本之间的间距 - 引导程序答案

【问题标题】：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-3 和 pl-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 中如何做到这一点？
请将答案标记为“已接受”，以便其他人知道问题已解决！