Question

我在导航栏中填充有奇怪的问题，这取决于navbar-expand。

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

就像你可以看到Logo和菜单按钮不适合页面的其余部分。我的代码出了什么问题？

<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>

Answer 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

Answer 2

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

Bootstrap 4 - 在navbar-expand

2 个答案: