Bootstrap 4 min width fluid container (change responsive behavior)

问题

I am building a fluid-container Bootstrap 4 SPA that will only be used on desktop.

I am trying to restrict the min body width to 1200px and have a horizontal scroll if the user reduces their browser width to less than 1200px, however, any size bigger than 1200px should be responsive.

I tried the following:

<meta name="viewport" content="width=device-width, initial-scale=1">

and

body { min-width: 1200px; }

But that didn't seem to work, I have also tried setting it on the fluid-container, but didn't work as well and all the elements were still responsive below 1200px.

The columns within the container are freezing but any setting that is affected by responsive behaviour is still changing when the size goes below 1200px, this needs to stop.

How do you achieve min width in Bootstrap 4 fluid-container and have all the elements acting non-responsive below that?

回答1:

"The columns within the container are freezing but any setting that is affected by responsive behaviour is still changing when the size goes below 1200px, this needs to stop."

As far as I can tell, your question is really how to make responsive behavior based on the container width, and not the viewport width. As answered before, this isn't really possible because Bootstrap's responsive behaviors use @media queries.

Your original question of setting a min container width has already been answered. It's simplest to use a custom container element like this:

.container-1200 {
  width: 100%;
  min-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

https://www.codeply.com/go/CUAh9pgRpu

However, this won't effect other responsive behaviors like column width, responsive alignment, flexbox, etc.. because you're not changing Bootstrap's responsive breakpoints.

AFAIK, the only way to get the desired result of responsive above 1200px would be to customize Bootstrap's breakpoints using SASS. You'd override all the breakpoints under xl to 1px min-width. This will make all the smaller breakpoints (xs,sm,md an lg) behave the same (non-responsive), and xl will still be responsive.

$grid-breakpoints: (
  xs: 0,
  sm: 1px,
  md: 1px,
  lg: 1px,
  xl: 1200px
);

Then set the container width...

$container-max-widths: (
  xs: 1200px,
  sm: 1200px,
  md: 1200px,
  lg: 1200px,
  xl: 100%
);

In the end, you have a single breakpoint of 1200px:

Demo: https://www.codeply.com/go/gnwTNZFYV2

How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?
How to create new breakpoints in bootstrap 4 using CDN?

回答2:

Try this:

.custom {
  min-width: 1200px;
  overflow: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid custom">
  <div class="row">
    <div class="col-6">
      Hello
    </div>
    <div class="col-6">
      Hello
    </div>
  </div>
</div>

回答3:

Try adding a media query as follows:

@media (max-width:1201px) {
    body{
        min-width:1200px;
        overflow-x:scroll;
    }
}

Use 1201px on media query to avoid overrides.

回答4:

So here is the thing, Whenever we design responsiveness we mostly use adaptive to fit the device and we hide the overflow. But particularly its overflow-x:hidden. So you can just keep overflow-x:auto on the body tag with min-width would fix it.

body {
  min-width: 1200px;
  overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        Hello Bootstrap 4
      </div>
    </div>
  </div>

来源：https://stackoverflow.com/questions/53856896/bootstrap-4-min-width-fluid-container-change-responsive-behavior

标签

css

bootstrap-4