如何使用 css 将引导类 col-md-10 更改为 div 的 col-md-12答案

【问题标题】：how to change bootstrap class col-md-10 into col-md-12 of div using css如何使用 css 将引导类 col-md-10 更改为 div 的 col-md-12
【发布时间】：2020-11-12 11:56:48
【问题描述】：

我在项目中使用了缩略图部分和视图部分。所以我把父div分成了两个div，第一个是col-md-3（即缩略图div），第二个是col-md-9（即视图部分） .现在我想隐藏第一个 div 并将第二个 div 更改为 col-md-12 用于移动或 ipad 等小型设备。

有没有办法通过媒体查询来实现？

【问题讨论】：

请发布您目前拥有的代码，并参考Bootstrap docs。 Bootstrap 网格类已经使用了断点，因此没有理由添加自定义媒体查询。

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

网格的 Bootstrap col 系统内置了这个。当您指定 col-md-3 时，您是在说“在中等屏幕上给这个 col 3 块”。您也可以并排 col-sm-12 在大屏幕上给它整行，而 col-sm-0 在小屏幕上隐藏它。在此处查看有关引导网格系统的更好解释： https://getbootstrap.com/docs/4.1/layout/grid/

【讨论】：

【解决方案2】：

<div class="row">
  <div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
  <div class="col-md-9">Some data</div>
</div>

这将解决您的问题。对于超小和小屏幕缩略图将不会出现。

【讨论】：

@Durgesh Gupta，您是 stackoverflow 的新手。如果答案正确，则检查为正确答案并投票
thumbnail hide by class="col-md-3 d-none d-sm-none d-md-block" 但我的视图部分仍在 col-md-9。那我该怎么办呢？
这样使用，