html - 将两列放在另一列下方，带侧边栏

Question

我被困在这个布局问题上，我想在右侧将两列放在另一列下方，并且我想将导航保留在左侧。我目前有这个布局:

问题是，它们没有正确放置。我希望它们一个一个地对齐，像这样:

@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">
        <div class="col-md-10">
            // Second column layout
        </div>
    </div>
@stop

我包含的导航侧边栏:

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

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

Answer 1

尝试将 bootstrap 4 实用程序 justify-content-end 添加到您想要正确对齐的 row 中。如果你制作一个工作片段会很有帮助

@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>