如何在具有引导程序 class 'col-md-6' 的页面上全宽显示 DIV？

Question

我试图在页面上并排显示 div。 但是，如果页面上只有一个col-xs-12 col-md-6 div class，那么我会尝试将其显示为全宽 (100%) 而不是 50%。 目前即使只有一个col-xs-12 col-md-6它也只使用了 50%。 HTML 来自 MVC，所以这个 HTML 是固定的。 有没有办法使用 CSS 或 JavaScript/jQuery 来做到这一点？ 我在想下面的 javascript（下面）可以解决问题，但事实并非如此。

这是我的 HTML 和 CSS：

<div class="col-xs-12 col-md-6 textcontent">
   </div>

<div class="col-xs-12 col-md-6 service">
   </div>

<div class="col-xs-12 col-md-6 textcontent">
   </div>

CSS

.col-md-6{
width50%;
}

JavaScript

if ($('.col-xs-12.col-md-6').length == 1) {
    $('.col-xs-12.col-md-6').toggleClass(".col-xs-12.col-md-12")
    }

Answer 1

Bootstrap 网格系统基于 12 列 model。您可以只使用 col-12 表示一列填充所有容器宽度。

尝试这个：

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

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

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

如果您想根据设备屏幕宽度应用不同的列配置，这里有关于带有引导程序和断点的网格系统的文档。

Answer 2

抱歉，您被锁定在 Bootstrap 中。 这可以通过 Flexbox 轻松完成。针对您发布的具体问题和代码，您的 class 切换只有一个小错误。

if ($('.col-xs-12.col-md-6').length == 1) {
    $('.col-xs-12.col-md-6').toggleClass("col-xs-12 col-md-12");
}

添加 class 名称时，您不想添加“ . ”，并且希望 class 名称像在 HTML 中出现的那样分开。您正在尝试添加 class=" .col-xs-12。 col-md-12"而不是 class=" col-xs-12 col-md-12" 。

我想因为您使用的是 Bootstrap，所以您也不需要 css 定义 for.col-md-6 因为 Bootstrap 应该已经为您定义了。

Answer 3

您在 JavaScript 中实际需要做的是删除class “ col-md-6 ”。

if ($('.col-xs-12.col-md-6').length == 1) {
  $('.col-xs-12.col-md-6').removeClass("col-md-6")
}

.col-xs-12适用于xs以上的所有屏幕尺寸，对于md及以上的屏幕尺寸， .col-md-6会覆盖它。 因此，您只需删除 class 即可阻止覆盖发生。