我很惊讶 Twitter Bootstrap 没有媒体查询来构建适合移动纵向屏幕的网站版本。
一个棘手的事情是定义“移动肖像”的宽度。以前大多数手机的屏幕宽度为320px，但目前最明智的做法是针对比375px 更窄的设备。
我至少需要在375px 屏幕宽度处设置断点的.col-xxs-* 类，类似于.col-xs-*。这可以是 CSS 或 SCSS 代码。我正在使用 Bootstrap-4-alpha，希望解决方案也适用于 Bootstrap-3。
【问题讨论】：
标签： css twitter-bootstrap twitter-bootstrap-3 media-queries bootstrap-4
您可以通过使用 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 年更新：现在 xs- 中缀已在 Bootstrap 4 中删除，添加一个新的较小的 xxs 断点意味着这个最低断点没有中缀。例如：
col-6 (50% on xxs)
col-xs-6 (50% on xs)
文档中关于使用 SASS 自定义 Bootstrap 的说明...
修改 custom.scss 中的任何 Sass 变量和映射 .... Bootstrap 4 中的每个 Sass 变量都包含 !default 标志，允许 您可以在自己的 Sass 中覆盖变量的默认值，而无需 修改 Bootstrap 的源代码。根据需要复制和粘贴变量， 修改它们的值，并删除 !default 标志。如果一个变量有 已分配，则默认不会重新分配 Bootstrap 中的值。
【讨论】：
在 Bootstrap 4 中，您可以通过编辑 $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;
您将添加一个新断点xxs。但我建议使用 2 符号标识符，例如 ms 用于“中小”：
$grid-breakpoints: (
xs: 0,
ms: 375px,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
在 TWBS3 中，这并不容易 - 你将不得不破解代码。
【讨论】：
一些引导分叉以非常可靠的方式提供了额外的断点。这个似乎定期维护，对我来说效果很好：
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');
}
【讨论】：
您没有具体说明您要为哪款 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) {
}
【讨论】：
320px。我已经更新了我的问题，现在更清楚了