使 <div> 从一个维度“捕捉”到另一个维度

Question

这似乎使用 bootstrap/grid 应该很容易，但我一定遗漏了一些东西。我有一个容器 div，里面有两列 div。当屏幕尺寸达到某个点时，我希望容器直接从扩展尺寸（示例中为 780 像素）更改为紧凑尺寸（刚好足以容纳视口 div，~620 像素）。我可以让内部 div 正常运行，但容器 div 从扩展尺寸“滑动”到紧凑尺寸。我希望它是一个或另一个宽度。

我的html：

<div id="mc-container" class="d-flex flex-row flex-wrap">
    <div id="mc-header">title bar</div>
    <div id='mc-viewport'>viewport</div>
    <div id="mc-column">
        <div id='mc-list' class="d-flex flex-row flex-wrap">
            <div *ngFor="let l of list">
                <div id="mc-list-item">{{l}}</div>
            </div>
        </div>
        <div id="mc-controls" class="d-flex flex-row flex-wrap">
            <div class="control-placeholder" style="width: 150px">input box</div>
            <div class="control-placeholder" style="width: 75px">Fan</div>
            <div class="control-placeholder" style="width: 75px">NetNew</div>
            <div class="control-placeholder" style="width: 150px">download DXF</div>
        </div>
    </div>
</div>

我的CSS：

#mc-container {
  background-color: #ccccff;
  margin: 5px;
  max-width: 780px;
  width: 90%;
}

#mc-column {
  background-color: #dddddd;
  min-width: 150px;
  width: auto;
  height: auto;
  margin: 10px;
  margin-right: 0px;
  max-width: 600px;

  flex: 1 1 0;
}

#mc-viewport {
  background-color: lightsalmon;
  width: 600px;
  height: 400px;
  margin: 10px;
  margin-right: 0px;
}

#mc-list {
  background-color: lightcyan;
  width: 100%;
}
#mc-list-item {
  min-width: 150px;
  outline:  whitesmoke solid 1px;

}

#mc-controls {
  background-color: lightgreen;
  width: 100%;
  margin-top: 10px;
  margin-bottom: auto;
}

.control-placeholder {
  outline:  whitesmoke solid 1px;
  font-size: small;
}

#mc-header {
  background-color: whitesmoke;
  width:100%;
}

Answer 1

我建议你使用宽度作为百分比而不是使用像素

Answer 2

使用类 col-xl 通常会以相当大的尺寸捕捉。

或者使用@media only screen and (max-width: 620px) 或 min-width 属性。

我可能有这个倒退，但喜欢

@media only screen and (min-width: 620px) {
.someclass{
    display:none;
}
}

@media only screen and (max-width: 620px) {
.someclass{
    display:block;

} }