在较小的显示屏上，侧边栏的一部分显示在主要内容的上方，另一部分显示在主要内容的下方 [英] On smaller displays show one part of the sidebar above and a second part below the main content

问题描述

我有一个两列的引导程序布局:一个主要内容列和一个右侧边栏列.

I have a two-column bootstrap layout: a main content column and a sidebar column on the right.

• 在足够大的屏幕上，两个侧边栏DIV(上方和下方)将显示在主要内容的右侧.

• On big enough screens, both sidebar DIVs (abovemain and belowmain) are to be shown to the right of the main content.

在较小的屏幕上，我希望侧边栏的一部分(上方)显示在主要内容上方，其余部分(下方)显示在下方主要内容.

On smaller screens, I want one part of the sidebar (abovemain) to be displayed above the main content, the rest of it (belowmain) below the main content.

在足够大的屏幕上显示预期结果:

Expected Result on a big enough screen:

Column 1       | Columm 2
-------------- | ---------------------------------------
Main Main Main | Above Main Content or Side (X)
Main Main Main | ---------------------------------------
Main Main Main | Below Main Content or Side

小屏幕上的预期结果:

Above Main Content or Side (X)
---------------------------------
Main Main Main
Main Main Main
Main Main Main
Main Main Main
---------------------------------
Below Main Content or Side

<div class="row">
   <div class="col-md-12 narrow">Above Main Content or Side (X)</div>
   <div class="col-md-8">Main Content</div>
   <div class="col-md-4">
       <div class="abovemain">Above Main Content or Side (X)</div>
       <div class="belowmain">Below Main Content or Side</div>
   </div>
</div>

到目前为止，我最糟糕的解决方案是:重复输出(X)，一次进入"窄"-DIV，第二次进入"上方""-DIV，然后根据媒体宽度用CSS隐藏一个或另一个:

My terrible solution so far: repeating the output (X), one time into the "narrow"-DIV, a second time into the "abovemain"-DIV, then hide one or the other by css according to the media-width:

   .narrow { display:none; }
   .abovemain { display:block; }
   @media (max-width: 800px) {
      .narrow { display:block; }
      .abovemain { display:none; }
   }

您知道不需要重复输出的无脚本解决方案吗?

Do you know a no-script-solution where the output doesn't have to be repeated?

推荐答案

使用自适应显示类(d-md-block)并浮动以将内容拉到 md 或更大的右侧...

Use the responsive display classes (d-md-block) and floats to pull the content to the right side on md and larger...

<div class="row d-md-block">
    <div class="col-md-8 float-left">Main Content</div>
    <div class="col-md-4 float-right order-first">Above Main Content or Side (X)</div>
    <div class="col-md-4 float-right">Below Main Content or Side</div>
</div>

https://www.codeply.com/go/guHhCc51o6

这篇关于在较小的显示屏上，侧边栏的一部分显示在主要内容的上方，另一部分显示在主要内容的下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！