0

我被要求实现一些我认为并不真正兼容的东西。

带有使用container. 所以，不是container-fluid。

它似乎不兼容，因为将container内容集中在视口中间。侧边栏往往很难靠在左边缘。

Bootstrap 侧边栏的每个示例都使用container-fluid，这进一步表明，这样做container是不切实际的。

有没有人看到它完成了container？是否有任何在线示例（我错过了）？

干杯

4

1 回答 1

2

我做了一个简单的演示。看看这是不是你想要的。

基本思想是将<body>显示为具有行方向的 flexbox，不换行，并在一些断点下方显示/隐藏侧边栏的切换器（因为在窄屏幕上没有足够的空间放置侧边栏，例如 lg 断点下方）。

结构

<body>
    <aside id="sidebar" class="collapse d-lg-block">
        <h2>Brand</h2>
        <nav class="nav flex-column">
            ...
        </nav>
    </aside>
    <main class="container">
        <nav class="navbar navbar-light d-block d-lg-none">
            <button class="navbar-toggler" data-target="#sidebar">
                ...
            </button>
        </nav>

        <h1>Dashboard</h1>
        ...
    </main>
</body>

风格

body {
    display: flex;
    flex-flow: row nowrap;
}

#sidebar {
    padding: 2rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
}

截图

低于大断点：

在此处输入图像描述

大断点以上：

在此处输入图像描述

演示

https://jsfiddle.net/davidliang2008/Lqvj09da/96/


如果您使用的是 SASS

如果您使用的是 SASS，我还能想到的另一件事是让侧边栏尽可能占据最大空间。

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;

我正在考虑将侧边栏的宽度设置为（视口宽度 - 容器最大宽度）/2：

@include media-breakpoint-up(lg) {
    #sidebar {
        ...
        width: calc(50vh - map-get($container-max-widths, "lg") / 2);
    }
}
@include media-breakpoint-up(xl) {
    #sidebar {
        ...
        width: calc(50vh - map-get($container-max-widths, "xl") / 2);
    }
}
@include media-breakpoint-up(xxl) {
    #sidebar {
        ...
        width: calc(50vh - map-get($container-max-widths, "xxl") / 2);
    }
}

这只是一个想法。我还没有机会测试它。

于 2020-07-07T02:56:58.623 回答