将两列一个放在另一个下面，并带有侧边栏

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

尝试将引导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>

Answer 2

我猜您正在使用引导程序。试试这个：

@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

Answer 3

我认为您的HTML是错的，请像这样更改您的HTML。

@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