时间戳

首页 > 解决方案 > Flexbox 和元素位置

html - Flexbox 和元素位置

问题描述

我正在开发一个 asp.net 核心 MVC Web 应用程序，使用引导程序并试图创建一个侧边栏和主要内容区域。我在局部视图中创建了下面的代码，然后在 _Layout.cshtml 中引用该代码。这按预期工作，但是我希望我的主要内容（当前占位符文本）位于此旁边，而不是在下图中看到的内容被推到侧边栏下方。

侧边栏和主要 - 不正确

这是我想要实现的外观：

侧边栏和主要 - 正确

本质上是左侧边栏和右侧主要内容的设计，但是可以看出主要内容当前显示在边栏下方。

侧边栏的 HTML：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column text-white bg-dark" style="width: 280px; height: 100vh;">
  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
    <img class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" alt="Logo" style="height: 60px; width: 150px;" />
  </a>
  <div class="d-flex align-items-center text-light text-decoration-none">

  </div>
</div>

<div class="container d-flex flex-column">
  <main role="main" class="pb-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum.
      Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada
      fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.</p>
  </main>
</div>

如何将主要占位符内容放置在侧边栏旁边而不是在其下方？

标签： htmlcssbootstrap-4flexbox

解决方案

正确使用 flexbox 可以轻松解决您的问题。这是给你的代码。

HTML：

<div class="wrapper d-flex justify-content-between">
   <div class="item d-flex flex-column text-white bg-dark">
      <a class="d-flex align-items-center justify-content-center text-white text-decoration-none" href="/">
         <img alt="Logo" class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" style="height: 60px; width: 150px;"/>
      </a>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
      </ul>
      <hr>
      <div class="d-flex align-items-center text-light text-decoration-none justify-content-center">
         <ul class="nav-item d-flex">
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="fas fa-paint-roller">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="far fa-question-circle">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="">
                  <i class="fab fa-github">
                  </i>
               </a>
            </li>
         </ul>
      </div>
   </div>
   <div class="item d-flex flex-column">
      <main class="p-5" role="main">
        <h2>Home</h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum. Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.
         </p>
      </main>
   </div>
</div>

CSS：

<style type="text/css">
    body, html {
        height: 100%;
    }
    .wrapper {
        width: 100%;
        height: 100%;
    }
    .wrapper .item:nth-child(1) {
        flex: 0.25;
    }
    .wrapper .item:nth-child(2) {
        flex: 0.7;
    }
</style>

推荐阅读