html - 在不复制源代码块的情况下，将非连续内容 block 扩展到XL屏幕上的侧边栏

我只是不确定如何去做我想要达到的目标。
上下文关联

下面的

sheriffderek的答案似乎是使用CSS网格解决此问题的一个很好的尝试。这种方法的缺点是，当将内容添加到XL屏幕上的配置文件块时，它将影响该行中的其他单元格，从而导致较大的空白区域。是的，可以向grid-template-areas布局中添加更多行，但是我的内容是可变高度的，因此此解决方案似乎可能会导致意外的空白，具体取决于内容。

考虑到我不重复代码块的约束，我开始认为这对于纯粹的Bootstrap 4和CSS是无法解决的。

我有多年的CSS/HTML。我决不是初学者。我不想讨论我的学习旅程“应该”是什么。我使用Bootstrap 4的原因有很多。我想请回答者关注这个问题的具体要求。

相关上下文

我正在使用Bootstrap4。我希望使用纯Bootstrap 4解决方案(如果可能)。来自Bootstrap 4的Flex类，确定。在这一点上，如果符合我的要求，我将使用纯CSS和flexbox。

我有一个固定的左侧边栏。我将其隐藏在小屏幕上。左侧边栏不是此问题的重点；当屏幕宽度在768或更大时，焦点位于中间和右边的列。

在768(md最小)-1199(lg最大)的屏幕宽度上，内容块(“Cards Lower Sidebar”)位于，搜索栏内容块(顶部)和主内容区域(下面)之间。当屏幕尺寸缩放到1200px(xl)或更大时，我希望“Cards Lower Sidebar”块从弹出到右侧边栏。

在768(md最小值)-1199(lg最大值)之间的屏幕宽度上，配置文件内容块位于“主要内容区域”下方。当屏幕缩放到1200px(xl)或更大时，我希望此内容块弹出到右侧右侧栏 上方，位于“Cards下侧栏”上方上方。

我的要求是，我不能重复两次HTML源代码块。例如:根据来源查询的屏幕尺寸，在源文件中将配置文件块复制两次，并且一个都不显示。

图1
在下图中，“卡片下部侧栏”位于搜索框区域和“主要内容区域”之间。当屏幕转换为xl(1200px)时，“Cards Lower Sidebar”内容块弹出，成为右下侧边栏区域。搜索框和主要内容区域保持不变。
轮廓区域弹出，成为右上侧边栏区域。
我什至不知道这是否可能。

之前(lg屏幕)

之后(xl屏幕)

我不想将这个问题与我尝试过的许多错误方法混为一谈。我已经尝试了很多。
这是最小的示例代码:

html {
    height: 100%;
}
body {
    min-height: 100%;
    padding-top: 56px;
}

.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .main {
        padding-left: 370px;
    }

    .sidebar {
        position: fixed;
        width: 350px;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

#profile-img {
    width: 150px;
    height: 150px;
    background-color: #c9c9c9;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Responsive Scalable Layout</title>
        <link rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous">
        <link rel="stylesheet" href="css/custom2.css">
    </head>
    <body>
        
        <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </nav>
        
        <div class="container-fluid">
            <div class="row">
                <div class="sidebar">
                    <h1>Left Sidebar</h1>
                </div>
                <div class="col-sm-12 main">
                    
                    <div id="breadcrumbs">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="#">Home</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="#">Library</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Data</li>
                            </ol>
                        </nav>
                    </div>
                    
                    <div id="search">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Search..."
                                   aria-label="Recipient's username" aria-describedby="button-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div id="cards-block">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
                    
                    <div id="content" class="border rounded">
                        <div class="p-2">
                            <h1>Main Content</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut
                                debitis ipsa maiores molestiae qui suscipit vitae? Accusamus consequatur consequuntur
                                corporis cumque delectus, deserunt dolor doloremque dolorum eaque enim esse facere
                                facilis illo impedit incidunt ipsa laborum molestiae natus nihil praesentium quia quis
                                quo repellat repudiandae, rerum suscipit tempore totam velit voluptatem voluptatum?
                                Accusamus alias aliquam aperiam consectetur doloremque iste labore recusandae sed.
                                Accusamus accusantium ad beatae cumque deserunt eaque hic ipsum laudantium, magni
                                minima odit quas quos tempore tenetur voluptas. A, adipisci autem deserunt ducimus est
                                facilis fugiat itaque iusto minus, nam, nobis quas rerum sint totam voluptatum?
                            </p>
                        </div>
                    </div>
                    
                    <div class="border rounded" id="profile">
                        <div class="card p-2">
                            <div id="profile-img"></div>
                            <div class="card-body">
                                <h5>Profile</h5>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>

    </body>
</html>

注意:我posted a similar question前一阵子，但是我回答了自己的问题，而我的回答却是次等的。长话短说，我不能在Django中重复两次内容块(在模板内引发重复的标签错误)。因此，我想找到一种解决方案，该解决方案不会在HTML中重复两次相同的代码块。
更新
谦虚而恭敬地回答:

当将实际内容输入到内容块中时，

失败(例如:主要内容可以包含短内容或长格式内容)

建议使用CSS网格，但不能解决配置文件区域和XL屏幕上的卡片之间的间隙。

案例:

更新最终版本:
@ focus.style提供了最完整和创新的答案，可以解决此问题的要求。特别感谢@sherrifdereck等，因为这促使我更深入地研究响应式CSS设计。

最佳答案

这是一个示例，说明如何使用99％Bootstrap(无论如何必须添加一个额外的类.break)解决此任务。我这样做是因为尽管好奇BS是否可以处理它。

html {
  height: 100%;
}

body {
  height: 100%;
}

.break {
  flex-basis: 100%;
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="bg-primary">Navbar</div>
<div class="d-flex flex-wrap flex-column h-75">
  <div class="col-3 flex-fill bg-danger">Fixed</div>
  <div class="break"></div>
  <div class="col-lg-6 col-9 flex-fill flex-grow-0 bg-success order-1">Search</div>
  <div class="col-lg-3 col-9 flex-fill bg-warning order-lg-4 order-1">Cards Lower Sidebar</div>
  <div class="col-lg-6 col-9 flex-fill bg-info order-1">Main Content Area</div>
  <div class="col-lg-3 col-9 flex-fill flex-grow-0 bg-dark order-lg-3 order-1">User</div>
  <div class="break order-2"></div>
</div>

或在Codepan上动态查看。
更新了
我已经测试了所有答案，确实没有针对此任务的简单CSS解决方案。但!与使用Bootstrap 4一样，您的日志-我一点都看不到使用jQuery的障碍。干得好。一个防弹的答案，现在可以正常工作了。那天并没有给任何一个额外的CSS。

transferBlocks(); // calling function

window.addEventListener('resize', () => {
  transferBlocks(); // calling function on resize
});

function transferBlocks() {
  if ($(window).width() < 992) { /* checking for bootstrap LG breakpoint */
    // placing #cardsLowerSidebar and #user in center column
    $('#search').after($('#cardsLowerSidebar'));
    $('#mainContentArea').after($('#user'));
  } else {
    // placing #cardsLowerSidebar and #user in right column
    $('#colRight').append($('#user'));
    $('#colRight').append($('#cardsLowerSidebar'));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> 

<div class="d-flex flex-nowrap flex-column min-vh-100">
  <div class="bg-primary">Navbar</div>
  <div class="flex-fill d-flex flex-nowrap">
    <div class="col-3 px-0 bg-danger">Fixed</div>
    <div class="col-lg-6 col-9 px-0 d-flex flex-nowrap flex-column">
      <div id="search" class="bg-success">Search</div>
      <div id="cardsLowerSidebar" class="flex-fill bg-warning">Cards Lower Sidebar</div>
      <div id="mainContentArea" class="flex-fill bg-info">Main Content Area Main Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content Area</div>
      <div id="user" class="bg-dark">User<br>Subuser</div>
    </div>
    <div id="colRight" class="col-lg-3 px-0 d-flex flex-nowrap flex-column">
    </div>
  </div>
</div>

或在Codepan上动态查看。
已更新2
Bootstrap和display: grid的组合，自由格式JS。它也可能有用。
对于宽度超过992 px的屏幕，让我们假设我们有grid 2列和24行。
第一列包括带有#search的grid-row: 1 / span 1;(从间隔＃1开始并跨越1行)和带有#mainContentArea的grid-row: 2 / span 23;(从间隔＃2开始并跨越23行)。 1 + 23 = 24行。
第二列包含#user和grid-row: 1 / span 2; (从间隔＃1开始，跨越2行，比#search高)和#cardsLowerSidebar和grid-row: 3 / span 22;(从间隔＃3开始，跨越22行，因为#user跨越2行，与#search不同) )。 2 + 22 = 24行。
24行不是常数，可以使用其他值。在这里，需要将#cardsLowerSidebar和#mainContentArea设置为gossible高。
有关Grid Row的更多信息。

.d-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: auto;
}

#search {
  order: 1;
  grid-row: 1 / span 1;
}

#cardsLowerSidebar {
  order: 4;
  grid-row: 3 / span 22;
}

#mainContentArea {
  order: 2;
  grid-row: 2 / span 23;
}

#user {
  order: 3;
  grid-row: 1 / span 2;
}

@media (max-width: 991.99px) {
  .d-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto auto 1fr auto;
  }
  #search {
    order: 1;
    grid-row: auto;
  }
  #cardsLowerSidebar {
    order: 2;
    grid-row: auto;
  }
  #mainContentArea {
    order: 3;
    grid-row: auto;
  }
  #user {
    order: 4;
    grid-row: auto;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="d-flex flex-nowrap flex-column min-vh-100">
  <div class="bg-primary">Navbar</div>
  <div class="flex-fill d-flex flex-nowrap">
    <div class="col-3 px-0 bg-danger">Fixed</div>
    <div class="col-9 px-0 d-grid">
      <div id="search" class="bg-success">Search</div>
      <div id="cardsLowerSidebar" class="flex-fill bg-warning">Cards Lower Sidebar</div>
      <div id="mainContentArea" class="flex-fill bg-info">Main Content Area Main Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content
        AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain
        Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content
        AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain
        Content AreaMain Content AreaMain Content AreaMain Content Area</div>
      <div id="user" class="bg-dark">User<br>Subuser</div>
    </div>
  </div>
</div>

关于html - 在不复制源代码块的情况下，将非连续内容 block 扩展到XL屏幕上的侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62606012/

html - 在不复制源代码块的情况下，将非连续内容 block 扩展到XL屏幕上的侧边栏

上一篇：python - 无法从 'Beaglebone_Black_Driver' 导入名称 'Adafruit_DHT'

下一篇：python - Python + Selenium-如何检查使用CSS样式并显示为内容的图像？