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

Posted 2023-03-05

【中文标题】将两列放在另一列下方，带有侧边栏

【英文标题】：Putting two columns one below other, with sidebar

【发布时间】：2019-11-12 03:06:22

【问题描述】：

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

问题是，它们放置不正确。我希望它们在另一个下方完全对齐，如下所示：

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

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

【参考方案1】：

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

@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

【参考方案2】：

尝试将 bootstrap 4 实用程序 justify-content-end 添加到您想要对齐的 row。如果您制作一个有效的 sn-p 会很有帮助

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

【讨论】：

第一个解决方案正是我想要的，谢谢。

很高兴能帮到你。快乐编码

【参考方案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