将容器行转换为列以提高响应性

Question

我正在为上面的图像编写具有响应能力的 html。下面是我目前的设计代码

HTML:

    <div class="container-fluid">
  <div
    class="row low-height box border bg-light justify-content-start align-content-start overflow-box"
  >
    <div class="col-1 border bg-primary small-box m-2"></div>
    <div class="col-1 border bg-primary small-box m-2"></div>
  </div>
  <div
    class="row low-height box border bg-light justify-content-end align-content-end"
  >
    <div class="col-1 border small-box bg-success m-1"></div>
  </div>
  <div
    class="row low-height box border bg-light justify-content-center align-content-center"
  >
    <div class="col-lg-12 text-center"><h4>Title</h4></div>
  </div>
</div>

CSS:

.box {
   height: 200px;
  margin-bottom: 10px;
}
.small-box {
  height: 100px;
}

.overflow-box {
  overflow: auto;
}

问题:

对于低于600px的浏览器高度，3个主要部分应该水平排列，如下图所示。

这是我无法解决的部分，在 bootstrap 网站上也找不到任何内容。可能是我从根本上做错了什么。请帮忙。

Answer 1

不要将三个灰色框的每一个都放在自己的行中，它们应该 cols 在响应式 Boostrap 网格中。

我已经更新了您的代码，将每个灰色框都放在 <div class="col-4 col-sm-12" ...> 中，以便根据您的要求将它们格式化为 XS 屏幕上的 3 列，以及所有更大尺寸屏幕上的 1 列。（虽然这与响应式网站通常的工作方式相反：通常在最小的屏幕尺寸上，网格会折叠成一列，而在较大的屏幕尺寸上，网格会展开成更多的列。）

.box {
  height: 200px;
  margin-bottom: 10px;
}

.small-box {
  height: 100px;
}

.overflow-box {
  overflow: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-4 col-sm-12 low-height box border bg-light justify-content-start align-content-start overflow-box">
            <div class="row">
                <div class="col-1 border bg-primary small-box m-2"></div>
                <div class="col-1 border bg-primary small-box m-2"></div>
            </div>
        </div>
        <div class="col-4 col-sm-12 low-height box border bg-light">
            <div class="row justify-content-end align-content-end">
                <div class="col-1 border small-box bg-success m-1"></div>
            </div>
        </div>
        <div class="col-4 col-sm-12 low-height box border bg-light justify-content-center align-content-center">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h4>Title</h4>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以尝试将 3 个主要部分包裹在一个行容器中，这样 bootstrap 将根据屏幕宽度自动处理响应部分（您还可以指定每个主要部分应采用的列数您想要的每个断点，或者让它保持自动，由您决定），当然，通过此调整，您需要删除每个主要部分的“行”classes，因为主要“行”包装器只能如果我没记错的话，将“cols”作为直接子元素。对于子元素或“主要部分”，您可以使用 d-flex class 和 flex 实用程序以您想要的方式在其中放置元素。

Answer 3

您可以在 css、

中添加媒体查询

@media(max-height:600px) {
    //here you can write your custom css for that condition
    //in this case,
    [class*="col"]{
    width:33%!important;
  }
}

这是一个例子

@media(max-height:600px) {
  [class*="col"]{
    width:33%!important;
  }
}

.box {
  text-align:center;
  padding:5rem;
  background-color: #22ccff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="px-lg-12 px-md-12 px-sm-12">
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 mb-4">
        <div class="box">Box-1
        </div>
      </div>
      <div class="col-xl-12 col-lg-12 col-md-12 mb-4">
        <div class="box">Box-2
        </div>
      </div>
      <div class="col-xl-12 col-lg-12 col-md-12 mb-4">
        <div class="box">Box-3
        </div>
      </div>
    </div>
  </div>
</div>

将容器行转换为列以提高响应性

Issue converting container rows into columns for responsiveness

html

css

bootstrap-4