HTML 行并排显示，而不是在列中垂直显示答案

【问题标题】：HTML rows displaying side-by-side rather than vertically within columnHTML 行并排显示，而不是在列中垂直显示
【发布时间】：2021-08-12 08:35:21
【问题描述】：

这个 div 不应该将我的两行显示在另一行之上吗？还是我错过了什么？

名为 'tabs' 和 'main' 的行在列内并排显示（左侧的'main'），而不是顶部 main 下方的选项卡

内容 div：

<div class='row content'>
        <div class='col-12' style='display:flex; flex-direction:column; justify-content: center;'>
            <div class='row tabs' style='align-items: flex-start; width:100%; '> 
                <ul class="nav nav-tabs" style='display:flex; flex-direction:row; position:absolute; right:0;'>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Posts</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Replies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Media</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">More</a>
                    </li>
                </ul>
            </div>
            <div class='row main' style='min-height:100px; width:100%;'>{{user.username}} 's profile </div>
        </div>
    </div>

CSS：

.content{
    width: 103.5%;
    min-height:50%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    background-color: #F3D5AE;
}

.tabs{
    position: relative;
    top:0%;
}

【问题讨论】：

你能提供一个你想要实现的模型吗，这个问题有点令人困惑......
@caiovisk 好的，我编辑了这个问题，希望更容易理解。

标签： html css twitter-bootstrap jinja2

【解决方案1】：

如果我理解正确，您真的只需要如下所示的内容。我建议您更加熟悉不同的utility classes bootstrap 提供的样式，以避免重复（在许多情况下是不必要的）样式，因为您对flex 和position 等的使用不正确，并且可以使您的输出在过程。干杯

.example {
  background-color: #F3D5AE;
}

.example2 {
  padding: 1rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row example'>
    <div class='col-12'>
      <ul class="nav nav-tabs justify-content-end">
          <li class="nav-item">
              <a class="nav-link active" href="#">Posts</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Replies</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Media</a>
          </li>
          <li class="nav-item">
              <a class="nav-link disabled" href="#">More</a>
          </li>
      </ul>

      <div class="col-12 example2">
        {{user.username}}'s profile
      </div>
    </div>
</div>

【讨论】：