0

当前站点 我现在有这个网站，上面有这段代码：


<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类似的方法，但是这些似乎都不起作用。，

4

4 回答 4

1

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

<img src="img/logo.png" width="55" style="margin-right:20px">
于 2020-12-17T02:04:18.273 回答
0

Bootstrap 5 中不再ml-*存在。它已被替换为ms-*. 阅读从 Bootstrap 4 到 Bootstrap 5 的变化。

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

代码

于 2020-12-17T13:18:28.717 回答
0

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

class="navbar-brand"

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

于 2020-12-17T02:19:06.970 回答
0

在图像的 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，因此请根据需要进行调整。

于 2020-12-17T10:09:28.707 回答