Поместить две колонки одна под другой, с боковой панели

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

Solution2:

<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

Я думаю, что ваш 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 

Answer 3

Полагаю, вы используете бутстрап.Попробуйте это:

@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