如何在具有 bootstrap class 'col-md-6' 的页面上以全宽显示 DIV？

Question

我试图在页面上并排显示 div。但是，如果页面上只有一个 col-xs-12 col-md-6 div class，那么我会尝试将其显示为全宽 (100%) 而不是 50%。目前它只使用了 50%，即使只有一个 col-xs-12 col-md-6。 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 列模型。您可以只使用 col-12 表示一列填充所有容器宽度。

试试这个：

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

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

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

这里是 documentation about grid system 和 bootstrap 和断点，如果你想根据设备屏幕宽度应用不同的列配置。

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，你也不需要 .col-md-6 的 css 定义，因为 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 开始的每个屏幕尺寸，并被 .col-md-6 覆盖屏幕尺寸 md 及以上。因此，您只需删除 class.

即可阻止覆盖发生

如何在具有 bootstrap class 'col-md-6' 的页面上以全宽显示 DIV？

How to display DIV to full width on a page that has a bootstrap class 'col-md-6'?

html

javascript

css

jquery

sass