Set Bootstrap container class to 940px max

问题

I'm using Bootstrap 4 with the container at default width on my desktop screen.

I want the main content section of my app to be max 940px container on big screen.

Do I simply override the bootstrap container class, or create new class container-2? or something else?

Edit

回答1:

according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':

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

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container {
  min-width: 992px !important;
}

You should never override original bootsrap-classes.

To ensure that everything works well you could do something like this:

@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

@media (min-width: 1200px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

.container.max-width-940 {
  min-width: 940px !important;
}

and use it like: <div class="container max-width-940"></div>

回答2:

change css in bootstrap file

click on above link and replace that pointed 2 value with 940px in bootstrap.min.css file.

回答3:

Since the Bootstrap container is responsive and uses media queries to set the max-width.

The container alone is only used to define width, auto margins and padding. Other grid class (ie row, col) are not dependent on it, so it would be easiest to define your own custom container.

To define your own container-940...

.container-940 {
  width: 100%;
  max-width: 940px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

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

Or, if you want to use the existing .container the overrides would be...

@media (min-width: 992px) {
  .container {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 940px;
  }
}

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

If you want to change the max-width to be smaller on smaller widths than you'd adjust the media queries as desired:

@media (min-width: 576px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 940px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 940px;
  }
}

回答4:

You should change variables in bootstrap/scss/_variables.scss

Take a look at line 210 of _variables.scss source the numbers are for the width of .container, in pixel, at different resolutions.

来源：https://stackoverflow.com/questions/53761060/set-bootstrap-container-class-to-940px-max

标签

css

twitter-bootstrap

bootstrap-4