如何在移动设备的中央内容列之间移动侧边栏列？

How can I move a sidebar column between central content columns for mobile?

提问人：mdolnik 提问时间：11/18/2023 最后编辑：Xab Ionmdolnik 更新时间：11/21/2023 访问量：67

问：

我希望有一种情况，即我具有以下元素：

  • 左侧边栏
  • 事由
  • 右侧边栏
  • 额外内容

我想要完成的是：

  • 在较大的屏幕上展开时：将“额外内容”排在主内容的正下方，并共享相同的宽度，主要内容和额外内容之间没有间隙。
  • 在小屏幕上折叠时：让所有元素以全宽垂直堆叠，但右侧边栏应位于“主要内容”和“额外内容”之间。

到目前为止，我的尝试：

.row {
  background: #dfdfdf;
}

.col {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
}

.tall {
  height: 100px;
}

.xtall {
  height: 200px;
}

.container.my-size .row {
  margin-top: 30px;
}

.container.my-size .row .col {
  background: #cdceff;
}

#sidebar-right {
  float: right;
}

#main {
  background: #ffeecd;
}

#extra {
  background: #ffeecd;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container my-grids">
  <div class="row flex-column flex-sm-row">
    <div id="sidebar-left" class="col col-sm-3 order-sm-1 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div id="main" class="col col-sm-6 order-sm-2 align-self-baseline">
      <div class="">Main Content</div>
    </div>
    <div id="sidebar-right" class="col col-sm-3 order-sm-3 align-self-baseline">
      <div class="tall">Right Sidebar</div>
    </div>
    <div id="extra" class="col col-sm-6 order-sm-4 align-self-baseline">
      <div class="">Extra Content</div>
    </div>

  </div>
</div>

<!-- Have a row which displays the current screen size -->
<div class="container my-size">
  <div class="row">
    <div class="col col-md-12 d-xs-block d-sm-none">Screen is <b>xs</b></div>
    <div class="col col-md-12 d-none d-sm-block d-md-none">Screen is <b>sm</b></div>
    <div class="col col-md-12 d-none d-md-block d-lg-none">Screen is <b>md</b></div>
    <div class="col col-md-12 d-none d-lg-block d-xl-none">Screen is <b>lg</b></div>
    <div class="col col-md-12 d-none d-xl-block d-xxl-none">Screen is <b>xl</b></div>
    <div class="col col-md-12 d-none d-xxl-block">Screen is <b>xxl</b></div>
  </div>
</div>

示例：摆弄我到目前为止所拥有的

目前正在发生的事情：

当侧边栏高于主要内容时当前发生的情况的图像

当前发生的情况的图像，当主要内容高于侧边栏时

小屏幕上当前正在发生的事情的图像（我想要的）

我想发生的事情：

我想要在大屏幕上显示的内容的图像

我想要在大屏幕上显示的内容的图像

我想要在小屏幕上显示的内容的图像

我目前正在使用 Bootstrap 3，在 Bootstrap 3 中有一个解决方案是理想的，但如果这是唯一的方法，我愿意有一个 Bootstrap 4/5 解决方案。

CSS Bootstrap-5 网格布局

评论

0赞 mdolnik 11/18/2023
谢谢你的提示。我已将标签更改为 Bootstrap 5，但会在 Bootstrap 3 的描述中保留简介，因为这对我来说是理想的选择。

答：

0赞 Arleigh Hix 11/18/2023 #1

使其正常工作的最简单方法是在另一个元素中复制内容，并显示/隐藏断点的相应内容。#extra

<div class="container my-grids">
  <div class="row">
    <div id="sidebar-left" class="col-sm-3 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div class="col-sm-6 align-self-baseline py-0">
      <div class="row">
        <div id="main" class="col-12 align-self-baseline">
          <div class="">Main Content</div>
        </div>
        <div id="extra" class="col-12 d-none d-sm-block">
          <div class="">Extra Content</div>
        </div>
      </div>
    </div>
    <div id="sidebar-right" class="col-sm-3 align-self-baseline">
      <div class="tall">Right Sidebar</div>
    </div>
    <div id="extra-extra" class="col-12 d-block d-sm-none">
      <!-- repeat extra content here or use js to copy -->
    </div>
  </div>
</div>

你可以只使用一点jQuery来复制内容：
（注意不要使用内部，因为它会创建一个无效的重复项）id#extra

$(document).ready(() => {
  $('#extra-extra').html($('#extra').html())
})

https://jsfiddle.net/chan_omega/rkqz81bc/

https://getbootstrap.com/docs/3.4/css/#grid-example-basic https://getbootstrap.com/docs/3.4/css/#grid-nesting

评论

0赞 mdolnik 11/19/2023
感谢您的回复，我确实认为这是一个想法，但由于您指出的一些潜在问题（例如重复的 ID，需要确保两个元素都动态更新，如果页面加载后发生任何变化，请避免使用任何重复的元素等）。
0赞 mdolnik 11/20/2023 #2

想出了如何做到这一点。

所做的更改：

  • 移动 、 并进入新的“内部容器”Main ContentExtra ContentRight Sidebar
  • 将此内部容器设置为在较大屏幕上占据除“第一列”之外的其余列，在较小的屏幕上占据全宽。
  • 将内部容器中的元素设置为使用浮点数和列样式来确定其宽度，但禁用弹性框。

摆弄解决方案

.row { 
  background: #dfdfdf;
}

.col {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
}

.tall {
  height: 100px;
}

.xtall {
  height: 200px;
}

.container.my-size .row {
  margin-top: 30px;
}

.container.my-size .row .col {
  background: #cdceff;
}

#sidebar-right {
  float: right;
}

#main {
  background: #ffeecd;
  float: left;
}

#extra {
  background: #ffeecd;
  float: left;
}

#inner-container {
  padding: 0;
}

#inner-container .col {
  flex: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container my-grids">
  <div class="row flex-column flex-sm-row">
    <div id="sidebar-left" class="col col-sm-3 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div id="inner-container" class="col col-sm-9">
      <div id="main" class="col col-sm-8">
        <div class="xtall">Main Content</div>
      </div>
      <div id="sidebar-right" class="col col-sm-4">
        <div class="tall">Right Sidebar</div>
      </div>
      <div id="extra" class="col col-sm-8">
        <div class="">Extra Content</div>
      </div>
    </div>
  </div>
</div>

<!-- Have a row which displays the current screen size -->
<div class="container my-size">
  <div class="row">
    <div class="col col-md-12 d-xs-block d-sm-none">Screen is <b>xs</b></div>
    <div class="col col-md-12 d-none d-sm-block d-md-none">Screen is <b>sm</b></div>
    <div class="col col-md-12 d-none d-md-block d-lg-none">Screen is <b>md</b></div>
    <div class="col col-md-12 d-none d-lg-block d-xl-none">Screen is <b>lg</b></div>
    <div class="col col-md-12 d-none d-xl-block d-xxl-none">Screen is <b>xl</b></div>
    <div class="col col-md-12 d-none d-xxl-block">Screen is <b>xxl</b></div>
  </div>
</div>

上一个：如何在C#中启用合同？

下一个：我想在react中使用bootstrap模板，无法使用javascript文件