使用 WHMCS 模板的 Bootstrap 4 列排序答案

【问题标题】：Bootstrap 4 column ordering with WHMCS Template使用 WHMCS 模板的 Bootstrap 4 列排序
【发布时间】：2018-06-30 09:35:46
【问题描述】：

所以，我正在重建由 WHMCS 提供支持的网站主题。我正在使用引导程序 4。使用 BS4，我试图弄清楚如何在客户区进行列排序（就像默认的“六”模板（使用 BS3）一样），但没有太多运气。它应该是这样的 - 在桌面视图上，主要和次要导航应该位于左侧，主要内容在右侧，而在移动视图上，主要导航缩小并位于内容上方，次要导航在内容：

桌面视图：

PN | MC
SN |

移动视图：

PN
MC
SN

这是基本的布局html：

<div class="container">
    <main class="row">
        <aside class="col-sm-3">
            BS4 Card containing Primary Navigation
        </aside>
        <article class="col-sm-9">
            Main client area content
        </article>
        <aside class="col-sm-3">
            BS4 Card containing Secondary Nav
        </aside>
    </main>
</div>

在桌面视图中，我无法弄清楚如何让辅助导航位于主导航下方的左侧，而是位于主要内容下方的左侧。在 BS3 中，这只是通过使用左浮动来完成，但由于 BS4 使用弹性盒，这不再有效。

编辑：
这里有一些小提琴，所以你可以看到发生了什么：

注意：已删除图像，因为小提琴显示的内容完全相同。

【问题讨论】：

嗨。你可以通过小提琴或其他方式在这里发布你的代码吗？我可能有一个解决方案，但需要检查它是否适用于您的特定用例。

标签： html css bootstrap-4 whmcs

【解决方案1】：

您一直在错误地使用引导网格。所有 col 的总和应为 12。我已经发布了您需要的工作代码：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <main class="row">
        <div class="col-lg-3 col-ms-3 col-sm-3 col-xs-3">
        <div class="row">
        <aside class="col">
            BS4 Card containing Primary Navigation
        </aside>
        </div>
        <div class="row">
        <aside class="col">
            BS4 Card containing Secondary Nav
        </aside>
        </div>
        </div>
        <div class="col-lg-9 col-ms-9 col-sm-9 col-xs-9">
        <article class="col">
            Main client area content
        </article>
        </d

对于移动视图，添加一个媒体查询，使二级导航position:fixed。

【讨论】：

在手机屏幕上，这会将主客户区内容一直向下推送，第二个导航栏将夹在两列之间。考虑在此处使用 'order' css 规则来更改小屏幕上的顺序。
@RohanMayya 感谢您的评论。但是请查看我所做的编辑。它将解决手头的问题。由 Johnno13 决定在媒体查询中与底部的距离。
@RohanMayya 您需要弹性项目才能使“订单”css 规则起作用。该问题需要使用当前的引导代码解决
@RohanMayya 使用顺序不是答案，因为在移动屏幕上，顺序已经正确。
@Arex 您的示例根本不起作用。它不会像我希望的那样在较小的屏幕上折叠。另请注意，我使用的是最新版本的 BS4。

【解决方案2】：

这是一个快速的解决方案：在第三列中添加一个“调整”类（或您希望的任何名称）。

<div class="container">
        <div class="row">
            <div class="col-sm-3">
                nav
            </div>
            <div class="col-sm-9">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus dolorum ea natus nam labore delectus vel, voluptatibus libero eligendi fuga optio! Nisi nemo architecto est, tenetur hic nesciunt distinctio totam repellat necessitatibus. Explicabo nam illum incidunt iusto recusandae nobis eos inventore dolore, suscipit cum earum numquam alias eveniet voluptatem!
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 adjust">
                nav2
            </div>
     </div>
</div>

CSS：

 .adjust{
   position:relative;
   bottom: 100px; /* whatever adjustment you wish */

 }

 @media(max-width:768px){
 .adjust{
  position:relative;
  top: 100px; /* whatever adjustment required to push it back down */
  }

 }

【讨论】：

我想我可以看到你在这里尝试做什么，但我认为这不会起作用，因为调整需要知道列的大小，但每个导航部分和内容本身将根据正在查看的页面改变大小。

【解决方案3】：

我找到了一个可行的解决方案。我希望将 flexbox 结构保留在元素上并使用 flexbox 适当地定位，但以下解决方案有效并且现在可以。

首先，使用 BS4 的显示实用程序通过将 .d-lg-block 添加到所有 4 个元素，将包含的 .row 加上内部的 .col-sm-* 项目转换为块级项目。
接下来，使用 float 实用程序适当地拉动每一列。在这种情况下，将.float-lg-left 添加到第一列和第三列（导航列），将.float-lg-right 添加到中间列（主要内容）。

这是在 BS4 中工作的一个小提琴：https://www.bootply.com/0TrQZNXF1S

【讨论】：