Question

我有两个引导容器，一个在页面的页眉导航栏中，第二个在导航栏之下。在每个容器内有一些文本。我希望所有响应断点的导航栏容器中的文本向左移动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示例。

此方法有效，但存在严重的错误。当浏览器的宽度减小时，标题导航栏中的文本开始超出屏幕。有什么办法可以避免这种情况？当然，很明显，我使用@media设置了边距，但是我认为这不是正确的方法。

Answer 1

如果在Bootstrap中使用正确的嵌套元素方式，则最终会得到对齐的左侧：.row将为您提供-15px的左侧以抵消15px的左侧填充在.col-xx-xx上。您可以做的是在其他容器中添加15px填充，并让navbar保留常规的引导容器max-width ...这将在默认容器上保留默认的15px填充navbar在手机/平板电脑等上。

<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

Answer 2

导航栏部分可以使用navbar-fixed-top代替fixed-top。在Bootstrap 4中，通过使用默认的CSS类ml-1,ml-2,..和填充pl-1,pl-2来调整左边距。

Ref Bootstrap 4 spacing

<nav class="navbar navbar-default navbar-fixed-top bg-primary">
  <div class="container">
    Text 1        
  </div>
</nav>
<div class="container">
    <div class="ml-4 mr-4">
     <p>Text 2</p> 
    </div>
</div>

在这里尝试输入答案：https://jsfiddle.net/testdesigner/aq9Laaew/193572/

引导程序4中剩余的容器偏移量

2 个答案: