有没有办法在 Bootstrap 4 中仅在移动设备上禁用 Jumbotron？答案

【问题标题】：Is there a way to disable Jumbotron only on mobile in Bootstrap 4?有没有办法在 Bootstrap 4 中仅在移动设备上禁用 Jumbotron？
【发布时间】：2019-04-02 03:36:15
【问题描述】：

我使用 jumbotron 在我的网站上的桌面版上拥有全高页面，但我希望在移动版上拥有正常布局（禁用 jumbotron）。因为在移动版本上，jumbotron div 内的内容会因为空间不足而向外流出。而下面的 div 内容与这些内容重叠。我正在使用 Bootstrap 4。我的代码如下，

<section class="jumbotron">
    <div class="container">
        <div class="content row">
            <div class="col-12 jumbotron">
                <div class="single-work">
                    <h2>Title here</h2>
                    <p>Text here</p>
                </div>
            </div>
        </div>
    </div>
</section>

【问题讨论】：

您不能“禁用”它，但您可以根据需要在移动设备上使用媒体查询来修改 CSS。
是的，您可以按照@IslamElshobokshy 的建议使用媒体查询来做到这一点。如需更多详细信息，请访问此处：w3schools.com/css/css_rwd_mediaqueries.asp

标签： html css bootstrap-4

【解决方案1】：

您可以使用如下媒体查询：

    @media only screen and (max-width: 875px) {

        .jumbotron {
          width: 100%;
        }
    }

您可以将查询中的最大宽度更改为更适合您的那个，并且 css 只是那里的占位符，您可以隐藏它、更改宽度、删除属性或其他任何内容。尝试在开发者工具中播放，找出应该修改哪些属性以及如何修改，然后将这些修改添加到媒体查询中。

Islam Elshobokshy 已经在他的评论中回答了这个问题，我只是稍微阐述了一下。

【讨论】：

感谢你们的帮助。万分感激。我使用媒体查询来解决问题。

【解决方案2】：

这是来自这里的 jumbotron 类的 css，使用您的媒体查询进行相应更改，如 https://stackoverflow.com/users/8505314/giwrgos-lampadaridis 所说。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}
.jumbotron > hr {
  border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 6px;
}
.jumbotron .container {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
}

【讨论】：

感谢卡罗尔的回答。

【解决方案3】：

是的！您只能为移动设备隐藏。

您要做的就是添加.d-none .d-sm-block 类，以便仅对移动 (xs) 设备隐藏它们。

<section class="jumbotron d-none d-sm-block">
    <div class="container">
        <div class="content row">
            <div class="col-12 jumbotron">
                <div class="single-work">
                    <h2>Title here</h2>
                    <p>Text here</p>
                </div>
            </div>
        </div>
    </div>
</section>

有关隐藏特定设备的元素的更多详细信息，请请参阅引导文档： http://getbootstrap.com/docs/4.1/utilities/display/

【讨论】：

禁用意味着显示：无；我认为在 jumbotron 的类上，所以如果他使用 sm 类的默认引导配置，这个解决方案很好

【解决方案4】：

如果你使用的是 Bootstrap 4，你也应该使用它的特性，比如断点。在 bootstar_config 文件中，您可以设置断点（以像素为单位的屏幕宽度）并相应地设置类的样式。

Using media breakpoints in Bootstrap 4-alpha

例如：例如：

.something {
    @include media-breakpoint-up(sm) { // from small resolutions
        padding: 20px;
    }
    @include media-breakpoint-down(md) { // under medium resolutions
        padding: 40px;
    }

    @include media-breakpoint-only(md) { // only on medium resolution
        padding: 40px;
    }
}

【讨论】：

谢谢帕特里克，这太棒了。