Question

我很惊讶Twitter Bootstrap没有媒体查询来为移动纵向屏幕构建足够的网站版本。

一个棘手的事情是定义“移动肖像”宽度。以前大多数手机的屏幕宽度都为320px，但目前最值得推荐的是针对比375px更窄的设备。

我需要至少.col-xxs-*个类，其断点宽度为375px，类似于.col-xs-*。这可以是CSS或SCSS代码。我正在使用Bootstrap-4-alpha，希望解决方案也适用于Bootstrap-3。

Answer 1

通过使用SASS更改$grid-breakpoints和$container-max-widths变量，您可以向BS 4添加新的断点。

    /* your _custom.scss */

    @import "bootstrap/functions";
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    $grid-breakpoints: (
      xxs: 0,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    $container-max-widths: (
      xxs: 375px,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    @import "bootstrap";

http://codeply.com/go/mPS4Yros4U

更新2018 ：现在已经在Bootstrap 4中删除了xs-中缀，添加一个新的较小的xxs断点意味着这个最低断点没有中缀。例如：

col-6 (50% on xxs)
col-xs-6 (50% on xs)

有关使用SASS自定义Bootstrap的说明，来自文档 ...

修改 custom.scss 中的任何Sass变量和地图.... Bootstrap 4中的每个Sass变量都包含！default flag允许你可以在没有你自己的Sass中覆盖变量的默认值修改Bootstrap的源代码。根据需要复制和粘贴变量， 修改其值，然后删除！default flag 。如果变量有已经分配，然后默认情况下不会重新分配 Bootstrap中的值。

Answer 2

您没有指定您正在设计的iPhone，所以这里有大部分可以帮助您入门

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Answer 3

一些引导分支以非常可靠的方式提供额外的断点。这个似乎定期维护，对我来说很好：

SCSS：https://gist.github.com/Jakobud/c057577daddbde4dd709

// Mid-Small breakpoint

$screen-ms: 480px !default;
$screen-ms-min: $screen-ms !default;
$screen-ms-max: ($screen-sm-min - 1) !default;

// Redefined Extra Small max value (Can't override non-default variables in SASS)
$screen-xs-max-new: ($screen-ms-min - 1) !default;

// Common styles (see make-grid-columns() in bootstrap/mixins/_grid-framework.scss)

.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

// Misc. class adjustments for col-ms

@media (min-width: $screen-ms) and (max-width: $screen-ms-max) {
  .container {
    max-width: $screen-sm - 20px;
  }
  .hidden-xs {
    display: block !important;
  }
}

// col-ms grid

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include make-grid(ms);
}

// Visibility utilities

@include responsive-invisibility('.visible-xs, .visible-ms');

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-ms-block,
.visible-ms-inline,
.visible-ms-inline-block {
  display: none !important;
}

@media (max-width: $screen-xs-max-new) {
  @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
  @media (max-width: $screen-xs-max-new) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: $screen-xs-max-new) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: $screen-xs-max-new) {
    display: inline-block !important;
  }
}

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-visibility('.visible-ms');
}
.visible-ms-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: block !important;
  }
}
.visible-ms-inline {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline !important;
  }
}
.visible-ms-inline-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline-block !important;
  }
}

@media (max-width: $screen-xs-max-new) {
  @include responsive-invisibility('.hidden-xs');
}

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-invisibility('.hidden-ms');
}

LESS：https://gist.github.com/wdollar/135ec3c80faaf5a821b0

Answer 4

在Bootstrap 4中，您可以通过编辑long - 变量来添加新的断点。最初是：

$grid-breakpoints

将其更改为

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

你会添加一个新的断点$grid-breakpoints: ( xxs: 0, xs: 375px, sm: 544px, md: 768px, lg: 992px, xl: 1200px ) !default;。但我建议使用2-sign-identifier，例如xxs用于“中小”：

ms

在TWBS3中，它并不那么容易 - 你将不得不破解代码。

Twitter Bootstrap：为xxs断点添加媒体查询

4 个答案: