引导d-flex布局

Question

仍然是一个新手，学习Bootstrap的Flex实用程序和布局。尝试利用Bootstrap的..flex、.flex和.flex列来创建一个固定的左侧侧边栏和页面右侧的主要内容。我需要的一些要求是：

1. 侧边栏仍然固定在原地。我不希望它与主要内容滚动。
2. 主要内容需要在它的弹性列窗口中以水平为中心。
3. 我希望能够使我的主要内容的模板，我可以使用不同的布局到位。例如，我想让一个页面有一个垂直中心的搜索表单，底部有一个页脚，而另一个网页有很多内容不是中心的。

我几乎有了一个可行的解决方案，这可能是一个简单的解决方案；然而，我对主要内容的布局并没有像我想的那样做出响应。我正在尝试创建一个例子，它有一个垂直中心的搜索表单，底部有一个页脚--我可以使其中的一个需求工作，但不能同时工作。我意识到了使用一个溢出的flex容器(类将集中内容，而您不能滚动到顶部)的问题，但是在这个示例中，我不应该使用这种场景。

• 垂直中心示例：在这里，我在我的. use列中使用了.。这是我的搜索表格的中心，但是我的页脚想被放在它下面。我试图在我的搜索表单中添加一个. my auto，包装在一个. but列中，但它似乎被忽略了。
• 页脚正确放置：我可以把我的页脚正确地放在这里，但我的搜索表格没有放在顶部。

作为设计考虑，我还想问一些其他的问题:我是应该将我的搜索表单包装在. ask列中，还是有更好的方法？看起来，这个方法或者一个.row和一个.column组合是我使它以标题为中心的唯一方法。

谢谢你的帮助。

更新：

多亏了@graham_reynolds，我才得以实现我所追求的布局。我无意中发现了另一个问题，我的侧边栏；然而，当显示非常短，菜单项需要滚动来显示所有这些。在这些场景中，我认为我需要添加属性。

overflow-y: scroll;

到我的自定义CSS文件，我用它来制作我的边栏。问题就在这里..。

当我使用这个属性并单击" login“按钮时，我的登录窗口隐藏在右侧的主内容后面(在这个屏幕截图中可以看到)。所以我的主要问题是，我怎样才能避免这种情况？我认为在"y“轴中指定溢出会防止内容从一边到另一边。

目前，为了避免这种情况，我只需注释掉overflow-y: scroll;，但是当我的显示非常短而您向下滚动时，我会在我的侧边栏上得到奇怪的行为。以下是我的两个工作例子：

• 侧栏卷轴，但隐藏了我的登录菜单。
• 侧栏固定和怪异的行为。

下面是我在CSS文件中添加溢出属性的地方

.sidebar {
  background-color: #adb5bd;
  min-width: 250px;
  overflow-y: scroll;
}

谢谢

Answer 1

使用第二个选项，将mt-auto添加到您的容器流体中：

​

<main class="d-flex flex-column flex-grow-1 overflow-auto" style="min-width: 700px;">
      <div class="container-fluid mt-auto">
        <div class="d-flex flex-column">
          <h1 class="display-3 text-center">
            Circuits
          </h1>
          <form class="loading align-self-center" action="/search/" method="get">
            <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
          </form>
        </div>
      </div>

​

这将适用于您当前的设计。

作为设计考虑，我还想问一些其他的问题:我是应该将我的搜索表单包装在. ask列中，还是有更好的方法？看起来，这个方法或者一个.row和一个.column组合是我使它以标题为中心的唯一方法。

布局应该遵循引导层次结构，即容器->行->列。显然，在列中有列的情况下，它确实有效，但并不理想。

编辑:你可以看到这一点，当你去移动，你的网站只响应到大约800 is宽。