html - 在移动视口(viewport)中，如何使用 Bootstrap 4 flexbox 强制侧边栏列菜单简单地切换到顶部列菜单？

Question

就目前而言，菜单首先切换到水平顶部(在其余内容之上)，然后换行以便一个或两个元素位于第一行，其余元素位于第二行，最后当屏幕较小时足够了，它变成了一个专栏。我希望它始终是一列，当屏幕对于侧边栏来说太小时，切换到顶部。

这是我的 HTML:

<div class="container h-100">
<div class="row h-100">
    <!-- left sidebar -->
    <div class="col-lg-2 fixed pl-0 py-3 ">

        <ul class="nav flex-md-column ">
            <li class="nav-item">
                <a class="nav-link" href="#">aaaaaaaaaaaaaaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">aaaaaaaaaaaaaaaaaaaaaaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">dddddddddddddddddddddddd</a>
            </li>

        </ul>

    </div>
    <!-- center content -->
    <div class="sc-content col fluid bg-faded ">


        <h4 class="mt-3">Now that Bootstrap 4 has a flexbox grid it's much easier to create a fixed-fluid layout like this one.</h4>
        <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
            modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
        <p>What will you do with this new awesomeness in Bootstrap 4?</p>

    </div>
   <div class="col-lg-2 fixed py-3">
        <!---leave nothing here, just to make text centered. Alternatively, add a right sidebar later.-->
    </div> 
</div>

Answer 1

您可以使用内置类 flex-column https://getbootstrap.com/docs/4.0/utilities/flex/#direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container h-100">
<div class="row h-100">
    <!-- left sidebar -->
    <div class="col-lg-2 col-sm-12 fixed pl-0 py-3 ">

        <ul class="nav flex-column ">
            <li class="nav-item">
                <a class="nav-link" href="#">aaaaaaaaaaaaaaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">aaaaaaaaaaaaaaaaaaaaaaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">dddddddddddddddddddddddd</a>
            </li>

        </ul>

    </div>
    <!-- center content -->
    <div class="sc-content col fluid bg-faded ">


        <h4 class="mt-3">Now that Bootstrap 4 has a flexbox grid it's much easier to create a fixed-fluid layout like this one.</h4>
        <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
            modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
        <p>What will you do with this new awesomeness in Bootstrap 4?</p>

    </div>
   <div class="col-lg-2 fixed py-3">
        <!---leave nothing here, just to make text centered. Alternatively, add a right sidebar later.-->
    </div>

如果我理解问题的其他部分，您也可以使用 col-sm-x 类来跨越导航。