Bootstrap 4-如何在笔记本电脑和较小的笔记本电脑上隐藏容器，但在台式机上显示容器 [英] Bootstrap 4 - How to hide a container on laptop and smaller but show it on desktop

问题描述

我正在开发网站的标题.在全高清桌面上，搜索栏如下所示:

I am developing the header of a website. The searchbar looks like this in full hd desktop:

但是在笔记本电脑视图(宽度:1280像素)上，它看起来像这样:

But on laptop view (width: 1280px) it looks like this:

因此，我尝试隐藏笔记本电脑视图和较小视图的最后一列，但是似乎没有办法，因为超大被定义为> = 1200px ，并且我的笔记本电脑屏幕宽度为1280px.为什么我的便携式笔记本电脑小屏幕已经被视为超大屏幕"?

So I try to hide the last column for laptop view and smaller views, but there seems to be no way, since Extra large is defined as >= 1200px and my laptop screen is 1280px width. Why is my tiny laptop screen already considered as "Extra large" ?

Bootstrap声称是移动优先"框架.但是，从断点来看，这是一个仅用于移动设备的布局框架

Bootstrap claims to be a "mobile first" framework. However, judging from the breakpoints, it's a mobile-only layout framework

我是否必须使用媒体查询和自定义CSS类将其隐藏，还是还有4种引导程序?

Do I have to use media queries and custom css classes to hide it, or is there still a bootstrap 4 way?

https://getbootstrap.com/docs/4.0/layout/grid/

推荐答案

您可以根据自己的喜好自定义断点:​​

You can customize the breakpoints to your liking:

https://getbootstrap.com/docs/4.4/布局/网格/#customizing-the-grid

将sass中的值调整为所需/需要的值.

Adjust the values in the sass to the ones you want / need.

示例:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1281px // or what ever else you want for extra large
);

这篇关于Bootstrap 4-如何在笔记本电脑和较小的笔记本电脑上隐藏容器，但在台式机上显示容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！