html - 消除导航栏导致的水平滚动

Question

请考虑这个简单的 Bootstrap 示例:

Demo

导航栏导致水平滚动，我该如何消除它？

谢谢

Answer 1

用这个替换您的 HTML 代码。您更正类名拼写 container-fluid。

  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 border-bottom shadow-sm">
        <h5 class="my-0 mr-md-auto font-weight-normal  ">
            My Company
        </h5>
        <nav class="my-2 my-md-0 mr-md-3">
            <a class="p-2 text-dark" href="#">Features</a>
            <a class="p-2 text-dark" href="#">Enterprise</a>
            <a class="p-2 text-dark" href="#">Support</a>
            <a class="p-2 text-dark" href="#">Report</a>
        </nav>
        <a class="btn btn-outline-primary" href="#" style="background-color: #007bff; color: white">Hi There</a>
    </div>
    <div class="container-fluid margin-top-zero">
        <div class="row">
            <main role="main" class="col-md ml-sm-auto pt-3 px-4">
                <div>
                    Helllooooo
                </div>
            </main>
        </div>
    </div>