Question

因此，我正在重建由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使用了flex-boxes，因此不再起作用。

修改：
这里有一些小提琴，所以您可以看到发生了什么：

注意：由于小提琴显示的是完全相同的东西，因此删除了图像。

Answer 1

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

<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 */
  }

 }

Answer 2

您使用的引导网格不正确。所有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。

Answer 3

我找到了一个可行的解决方案。我希望将flexbox结构保留在元素上，并使用flexbox适当地放置它们，但是以下解决方案可以并且现在就可以使用。

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

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

使用WHMCS模板的Bootstrap 4列排序

3 个答案: