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:

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

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 claims to be a "mobile first" framework. However, judging from the breakpoints, it's a mobile-only layout framework

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/

回答1:

You can customize the breakpoints to your liking:

https://getbootstrap.com/docs/4.4/layout/grid/#customizing-the-grid

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

Example:

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

来源：https://stackoverflow.com/questions/59753330/bootstrap-4-how-to-hide-a-container-on-laptop-and-smaller-but-show-it-on-deskt