在小型设备中，使引导程序列之间的空间彼此对齐

Question

• 在此示例中，一行中有两列col-sm-3，col-sm-8。

• 将窗口最小化（请参见屏幕截图）后，两列均被粘住    对彼此。 -另外第二列，即col-sm-8在sm断点处也未采用全宽。

  注意：想要在sm断点处的列之间保留主空间，也希望充满 col-sm-8的大小。

  link to bootstrap code

Answer 1

您可以像这样在margin上添加一些breakpoint：

@media screen and (max-width: 576px) {
  .col-sm-8 {
    margin-top: 30px;
  }
}

sm关键字的意思是引导程序很小，在576px处中断。

This post解释得很好

全宽

为了使最后一个div变为全角，您可以通过检查开始为什么不全角。

如您所见，它的两边都有填充物-padding: 15px。我们可以在断点处将其删除，以保持较高的分辨率。

@media screen and (max-width: 576px) {
  .col-sm-8 {
    padding-left: 0;
    padding-right: 0;
  }
}

这是您的代码，带有新代码

Codepen example

Answer 2

您只需要添加类，然后ios_base::sync_with_stdio(false); cin.tie(NULL); cout.tie(NULL); long long int n; cin >> n; int arr[n]; for(int i = 0; i < n; i++) cin >> arr[i]; int q, b; cin >> q; for(int j = 0; j < q; j++) //Number of Queries { cin >> b; int count = 0; for(int z = 0; z < n; z++) if(b == arr[z]) count++; if(count == 0) cout << "NOT PRESENT" << "\n"; else cout << count << "\n"; } 将为全角，并且在sm断点处的列之间也将保持空白

在col-sm-8 div col-sm-8上的以下内容中添加此内容：

only

<div class="col-sm-8 mt-3 mt-md-0 p-0 px-md-3">

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

Answer 3

首先，您可以使用所有Bootstrap边距属性。在那种情况下，我认为mb-3（margin-bottom-3）或mt-3（margin-top-3）应该是您想要的。

请注意，如果宽度超过X px，则使用纯CSS也可以添加边距。

例如：

@media screen and (max-width: 640px) {
    .do_margin_bottom {
        margin-bottom:20px; /* Equivalent of mX-3 */
    }
}

然后将.do_margin_bottom应用于您的col-sm-3。

第二点：col-sm-8正确缩进为col-sm-3。这是您的div.card，其中添加了margin-left：15px和margin-right：15px。您应该在card元素上设置这些值以获取所需的内容。

我个人建议您不要这样做。没有保证金的卡很奇怪。