列-行不移动时，屏幕尺寸小/移动屏幕?

Question

我试图让reactjshtmlbootstrap5页面中的行响应。例如，当屏幕尺寸很小时，我希望行中的列向下移动/变为垂直。

我认为这可以自己完成使用示例:网格系统文档

我尝试了很多不同的事情，但没有一个能解决这个问题。我认为这将很容易与引导5工作。我一定是错过了什么。

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
main {
min-height: 100vh;
background: linear-gradient(to right top, #FFFFFF, #D3D3D3);
}
.navbar {
/*background: #e6e7e8;*/
background: #D3D3D3;
}
.card {
background: inherit;
backdrop-filter: blur();
}
.card:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}
/*!* Make app full screen *!*/
/*#app {*/
/*    height: 100vh;*/
/*    width: 100vw;*/
/*}*/
/* css remove whitespace from above background */
.remove-whitespace {
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
}
.navbar-brand {
width: 5vw;
}

.chartBox {
width: 50vw;
height: 525px;
}

<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/custom.css">
<div class="container-flex">
<div class="row">
<div class="col">
<div class="chartBox" style="position: relative; height: 525px;">
<canvas role="img" id="line-chart" style="display: block; box-sizing: border-box; height: 525px; width: 960px;" width="960" height="525">
</canvas>
<div style=""></div></div></div>
<div class="col">
<div class="card card-body mt-4 mb-4 text-center mx-auto"><h2 class="text-center">Add</h2>
<form>
<div class="form-group text-center">
<label for="country">Country</label><select name="country" id="country" class="form-control text-center"><option value="">Select the country...</option><option value="India">India</option><option value="United States of America">United States of America</option></select></div>
</form>

Answer 1

代码片段中有几个问题。如果你想让一个列在移动设备上占100%的宽度，而在不同的分辨率上占更少，Bootstrap可以为你处理它，你不应该重写这样的东西:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

坚持使用Bootstrap类:

<div class="col-12 col-sm"></div>

这里的列将在移动设备上占用100%的宽度，然后它将与从断点sm,>=576px开始的其他列共享宽度

你也强制width:

.chartBox {
width: 50vw;
height: 525px;
}

<canvas role="img" id="line-chart" style="display: block; box-sizing: border-box; height: 525px; width: 960px;" width="960" height="525"></div>

如果你不添加max-width，它们会破坏布局，比如max-width: 100%;

请查看更新后的代码片段，它应该可以解决您的一些问题:

main {
min-height: 100vh;
background: linear-gradient(to right top, #FFFFFF, #D3D3D3);
}
.navbar {
background: #D3D3D3;
}
.card {
background: inherit;
backdrop-filter: blur();
}
.card:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}
.remove-whitespace {
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
}
.navbar-brand {
width: 5vw;
}
.chartBox {
height: 525px;
}
canvas {
max-width: 100%;
}

<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-sm">
<div class="chartBox" style="position: relative; height: 525px;">
<canvas role="img" id="line-chart" style="display: block; box-sizing: border-box; height: 525px; width: 960px;" width="960" height="525">
</canvas>
<div style=""></div>
</div>
</div>
<div class="col-12 col-sm">
<div class="card card-body mt-4 mb-4 text-center mx-auto">
<h2 class="text-center">Add</h2>
<form>
<div class="form-group text-center">
<label for="country">Country</label>
<select name="country" id="country" class="form-control text-center">
<option value="">Select the country...</option>
<option value="India">India</option>
<option value="United States of America">United States of America</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>

---

不要忘记阅读Bootstrap文档来学习如何使用他们提供的网格系统。