html - Bootstrap 4 中剩余的容器偏移量

Question

我有两个 Bootstrap 容器，一个在页面的标题导航栏内，第二个在导航栏下方。每个容器内都有一些文本。对于所有响应断点，我希望导航栏容器中的文本向左移动 15 像素。

我尝试使用负边距来做到这一点。这是我的代码:

<nav class="navbar px-0 navbar-light fixed-top bg-primary">
    <div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>

和JSFiddle示例。

这个方法可以，但是有一个严重的bug。当浏览器的宽度减小时，标题导航栏中的文本开始超出屏幕。有什么办法可以避免这种情况吗？当然很明显我是用@media设置边距的，但是我觉得这不是很正确的方式。

Answer 1

如果您在 Bootstrap 中使用正确的嵌套元素方式，您最终会得到一个对齐的左侧:.row 将为您提供 -15px 到左侧以对抗15px 在 .col-xx-xx 上左填充。你可以做的是向其他容器添加 15px 填充，并让 navbar 保持正常的 Bootstrap 容器 max-width ...在移动设备/平板电脑等设备的导航栏上保留默认的15px 内边距

<nav class="navbar px-0 navbar-light fixed-top bg-primary">
  <div class="container">
    <div class="row">
     <div class="col-sm-12">Text</div>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="container-inner">Text</div>
    </div>
  </div>
</div>

Codepen Example