Create custom grid system width defined column widths

问题

The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:

Large / col-lg (>= 1200px width)
Medium / col-md (992px - 1199px)
Small / col-sm (768px - 991px)
Extra Small / col-xs (<768px)

I find that these resolutions do not represent the user group of my webapp. For example Medium and Small combined is used by less than 5 % of my user base (meaning less than 5 % of my users have a screen resolution width of 768px to 1199px).

I would rather target the following 4 different resolutions:

ExtraLarge (>= 1600px width)
Large (1200px - 1599px)
SmallMedium (600 - 1199px)
MobileSmall (<= 599px)

So I not only like to add an extra large set but also change / replace the medium, small and extra small one.

Has anybody run into similiar issues? I would love to use a grid generator where I input my custom grid widths and get out the CSS code.

回答1:

You can customize pretty much every aspect of Bootstrap using the customization section of the official site.

http://getbootstrap.com/customize/#grid-system

That link takes you directly to the grid system items.

Enter your values, and download your custom version of Bootstrap. Even includes a JSON file with your settings so you can re-import them later and make adjustments.

回答2:

This is for the Bootstrap 4 users, who are using SCSS and like to create their own grid system using bootstrap mixins and variables.

@import '../../../bower_components/bootstrap/scss/variables';
@import '../../../bower_components/bootstrap/scss/mixins';

// Create custom variables to supply it for bootstrap's mixins
$grid-gutter-width-10: 10px;
$grid-gutter-widths-10: (
  xs: $grid-gutter-width-10,
  sm: $grid-gutter-width-10,
  md: $grid-gutter-width-10,
  lg: $grid-gutter-width-10,
  xl: $grid-gutter-width-10
);

.row-xs {
  @include make-row($gutters: $grid-gutter-widths-10);
  @include make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths-10, $breakpoints: $grid-breakpoints)
}

来源：https://stackoverflow.com/questions/29235602/create-custom-grid-system-width-defined-column-widths

标签

twitter-bootstrap-3

responsive-design

grid-layout