Html 将两列一列置于另一列之下，并带有侧边栏

我被这个布局问题困住了，我想把两列放在右边，一列在另一列的下面，我想保持左边的导航。我目前有这样的布局：

问题是，它们的位置不正确。我希望它们一个接一个地对齐，就像这样：

我包含的导航侧栏：

<div class="col-lg-2">
        //Sidebar layout
</div>

---

有什么简单的方法可以解决这个问题吗。感谢您的帮助。

我想您正在使用引导。试试这个：

@extends('layouts.app')
@section('content')
    <div class="row">
        @include('partials.admin-sidebar')
        <div class="col-lg-10">
            // first column layout
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            // Empty column
        </div>
        <div class="col-lg-10">
            // Second column layout
        </div>
    </div>
@stop

---

尝试将bootstrap 4实用程序添加到要对齐的行中。如果您制作一个工作片段，这将非常有用

@extends('layouts.app')
@section('content')
    <div class="row">
        @include('partials.admin-sidebar')
        <div class="col-md-10">
            // first column layout
        </div>
    </div>
    <div class="row justify-content-end">
        <div class="col-md-10">
            // Second column layout
        </div>
    </div>
@stop

解决方案2：

<div class="row">
  <div class="col-lg-2"></div>
  <div class="col-lg-10">
    <div class="row">
      <div class="col-lg-12"></div>
      <div class="col-lg-12"></div>
    </div>
  </div>
</div>

我认为你的HTML是错误的，改变你的HTML喜欢

---

第一个解决方案正是我想要的，谢谢。很高兴我能帮助你。快乐编码

<div class="row">
  <div class="col-lg-2"></div>
  <div class="col-lg-10">
    <div class="row">
      <div class="col-lg-12"></div>
      <div class="col-lg-12"></div>
    </div>
  </div>
</div>

@extends('layouts.app')
@section('content')
    @include('partials.admin-sidebar')
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
                // first column layout
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                // Second column layout
            </div>
        </div>
    </div>
</div>

@stop