Bootstrap 4 - 导航栏扩展中缺少填充答案

【问题标题】：Bootstrap 4 - missing padding in navbar-expandBootstrap 4 - 导航栏扩展中缺少填充
【发布时间】：2018-08-14 08:18:16
【问题描述】：

导航栏中的填充有一个奇怪的问题，这取决于导航栏扩展。

例如，如果我将其设置为 MD，我会看到：

您可以看到徽标和菜单按钮不适合页面的其余部分。我的代码有什么问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">Logo<!--<img src="/images/logo.png" alt="Logo" />--></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            
            <!-- Grupowanie elementów menu w celu lepszego wyświetlania na urządzeniach moblinych -->
            <div class="collapse navbar-collapse" id="menu">
                <ul class="navbar-nav">
                   <li class="nav-item "><a href="/index.html" class="nav-link">Home</a></li>
                   <li class="nav-item "><a href="/index.html" class="nav-link">Offer</a></li>
                   <li class="nav-item "><a href="/index.html" class="nav-link">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->	
      </div>
    </nav>
</header>
<main class="container">
<section>
    <div class="row">
        <div class="col">
            <h1>Head</h1>
            <p class="text-justify">Sed suscipit magna nulla, quis aliquam massa placerat nec. Cras ultricies, tortor ut pellentesque finibus, tellus nunc rutrum felis, ac lobortis turpis ligula eu lorem. Maecenas et dolor interdum, tristique lacus non, sollicitudin sapien. Sed eu mollis tellus, ac vestibulum felis. Aliquam eu egestas nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer et purus ut mauris tempor ultricies. Phasellus et vulputate erat. Quisque at venenatis eros, sit amet convallis enim. Aenean molestie egestas ipsum, vel malesuada ligula. Curabitur velit dolor, condimentum in pharetra lacinia, ultricies et sem. Phasellus et laoreet sapien. Pellentesque volutpat tortor quam. Maecenas nec ultricies magna.</p>
        </div>
    </div>
    </section>
</main>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

这是 Bootstrap 4.0.0 中的一个已知问题。这是 GitHub 中的问题报告：

https://github.com/twbs/bootstrap/issues/25654

这里是解决方法：

.navbar-expand-md  > .container {
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 575px) {
    .navbar-expand-md  > .container {
      padding-left: 0;
      padding-right: 0;
    }
}

https://www.codeply.com/go/S7P86COCRk

【讨论】：

感谢您通知我 :) 我希望他们会在 4.1 中修复它；）对于临时使用，我编写了简单的代码：/*Fix bugs padding in expand-md in BS4 - IF change breakpoint, you have to change the same in CSS*/ .navbar-expand-md>.container, .navbar-expand-md>.container-fluid { padding-left: 15px; padding-right: 15px; } @media (max-width: 575px) { .navbar-expand-md>.container, .navbar-expand-md>.container-fluid { padding-left: 0; padding-right: 0; } }

【解决方案2】：

这是因为您使用 navbar-expand-md 将其从布局中删除，您将拥有相同的容器大小..

【讨论】：

我不能这样做，因为它需要colla[sing menu。