用于宽度屏幕的引导 css答案

【问题标题】：bootstrap css for width screens用于宽度屏幕的引导 css
【发布时间】：2022-01-11 16:17:23
【问题描述】：

我的 wordpress 网站中有一个响应式主题（jax lite 主题），带有砖石布局。它使用 col-md-* 类，通过这种方式，笔记本电脑和台式机屏幕通常显示 3 列，而移动设备仅显示 1 列。

问题在于，在桌面大屏幕中，3 列在它们周围留下了很大的空闲空间。我讨厌不使用整个屏幕空间的网页。我想使用 col-lg-* 或 col-md* 类来做到这一点。例如，我希望在大屏幕上显示 4 或 5 列，甚至更宽的 3 列。

我在 template.css 中有这段代码：

.post-article .container-fluid .col-md-12,
.post-article .container-fluid .col-md-6,
.post-article .container-fluid .col-md-3 {
	margin-bottom:25px;
}

¿我该怎么办？

非常感谢！

【问题讨论】：

这是您使用的 CSS 吗？请将您的 css 和 bootstrap css 分开。当您自定义时不要使用 bootstrap 并覆盖它。第二件事是您应该覆盖模板，如果您想更改模板 html 元素上使用的类（如果它是 bootstarp）。

标签： css wordpress twitter-bootstrap

【解决方案1】：

您可以将 .col-lg-4 用于更大的桌面，如果您仍然遇到问题，请阅读此内容 Bootstrap Grid 还有这个Bootstrap grid details 用于理解网格

【讨论】：

我已经尝试过这样做。使用 lg 类，甚至使用 xs 类试图在移动设备中获取更多列。这些都不起作用。甚至，我尝试将所有 col-md-6、col-md-12 和 col-md-4 更改为 col-md-12。这意味着，砌体布局应该只显示一个单一的列。它不起作用！它仍然在标准缩放中显示 3 列，在小屏幕中显示 1 列。
能否请您提供网站的 URL，以便我进行分析

【解决方案2】：

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options这个连接可以帮你。您可以同时使用多个类。

例子

<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 ">
`Your Content`
</div>

【讨论】：