如何定位 Twitter Bootstrap <768px 和 480px 断点答案

【问题标题】：How to Target Twitter Bootstrap <768px and 480px Breakpoints如何定位 Twitter Bootstrap <768px 和 480px 断点
【发布时间】：2015-11-02 23:41:59
【问题描述】：

我想了解如何定位低于 768 像素的屏幕尺寸，特别是 480 像素的尺寸。我目前正在尝试创建一个页面，该页面将显示 3 个不同网站的 3 个徽标，效果很好，但在低于 768 像素时会崩溃。

我的 HTML 代码：

<!doctype html>
<html>
    <head>
        <title>Bootstrap Layout</title>
        <link rel="stylesheet" href="custom.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="darkbg col-sm-4 col-xs-12"><img src="logo1.jpg"/></div>
                <div class="darkerbg col-sm-4 col-xs-12"><img src="logo2.jpg"/></div>
                <div class="darkestbg col-sm-4 col-xs-12"><img src="logo3.jpg"/></div>
            </div>
        </div>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

我的 CSS：

/* custom stylesheet */

.darkbg {
    background: #999;
    text-align:center;
}

.darkbg img, 
.darkerbg img, 
.darkestbg img {
    width:100%;
    }

.darkerbg {
    background: #666;
    text-align:center;
}

.darkestbg {
    background: #333;
    text-align:center;
}

问题出在我使用“col-xs-12”类时，因为徽标在屏幕上看起来太大了，这应该类似于 col-sm 并作为 col-xs-4 分布在 4 列中。这解决了这个问题，但是当我达到 480px 的断点时，徽标看起来太小了，据我所知，最低断点是 col-xs，它针对 768px 的屏幕尺寸，所以我不确定如何解决这个问题问题。

我知道我可以使用媒体查询，但是对于当达到 480 像素大小时我需要编写什么代码来将每个徽标显示在彼此之上时，我有点困惑。

如果有人可以请建议，将不胜感激。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这里有 3 个示例片段。其中之一可能会有所帮助，具体取决于您的最终要求，您也可以随时创建 Bootstrap 的自定义版本。

网格示例）您可以调整图像大小 @480px 等。

1) 不使用网格：构建一个简单的类来更改显示属性@480px 并在任何断点处根据需要调整图像大小等。

2) 与示例 1 相同，但图像设置为 100% 宽度 @480px。

请参阅整页的示例片段。

.darkbg,
.darkbg.img-thumbnail {
  background: #999;
}
.darkerbg,
.darkerbg.img-thumbnail {
  background: #666;
}
.darkestbg,
.darkestbg.img-thumbnail {
  background: #333;
}
/**Grid**/

@media (max-width: 768px) {
  .img-block {
    text-align: center;
  }
  .img-block img {
    width: 150px;
  }
}
/**One**/

.img-block-one img {
  display: inline-block;
  width: 30%;
  padding: 5px;
  margin: 10px;
}
@media (max-width: 480px) {
  .img-block-one img {
    display: block;
    width: 50%;
    margin: 5px auto;
  }
}
/**Two**/

.img-block-two img {
  display: inline-block;
  width: 30%;
  padding: 5px;
  margin: 10px;
}
@media (max-width: 480px) {
  .img-block-two img {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2 class="text-center">Grid Example</h2>

  <div class="row img-block">
    <div class="col-sm-4 col-xs-12">
      <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkbg" />
    </div>
    <div class="col-sm-4 col-xs-12">
      <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkerbg" />
    </div>
    <div class="col-sm-4 col-xs-12">
      <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkestbg" />
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h2 class="text-center">Example One</h2>

  <div class="img-block-one text-center">
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkerbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkestbg" />
  </div>
</div>
<hr>
<div class="container">
  <h2 class="text-center">Example Two</h2>

  <div class="img-block-two text-center">
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkbg" />
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkerbg" />
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkestbg" />
  </div>
</div>
<hr>

这里是垂直和水平居中的示例。我将规则放在媒体查询中，因此它们只能在 480 像素以上工作，因为它可能对小型设备上的这种显示有利也可能不利：媒体查询本身可以被删除，因为它不会改变其他任何东西。这些也是新 img-block-one 类的宽度组件，可以根据您的需要进行调整。

希望这会有所帮助。

.darkbg {
  background: #999;
}
.darkerbg {
  background: #666;
}
.darkestbg {
  background: #333;
}
.img-block-one img {
  display: inline-block;
  width: 30%;
  padding: 5px;
  margin: 10px;
}
@media(min-width: 481px) {
  .img-block-one {
    width: 65%;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 480px) {
  .img-block-one img {
    display: block;
    width: 50%;
    margin: 5px auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="img-block-one text-center">
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkerbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkestbg" />
  </div>
</div>

【讨论】：

感谢 vanburen，示例 1 非常出色，正是我想要的方式。顺便说一句，让所有图像垂直对齐页面高度以使其位于中心的最佳方法是什么？只是为了我的学习，所以很想学习。
很高兴它对您有用，并查看有关居中的其他答案。
再次感谢 vanburen，非常感谢。

【解决方案2】：

可能最简单的解决方案是为.row > .col-* div 提供display: block 规则，用于宽度低于480 像素。这将迫使他们每个人占据一整排（一个在另一个之上）。

这样的事情应该可以工作：

@media (max-width: 480px) {
  .row .col-xs-12 {
    display: block;
  }
}

（注意：不知道，但您可能需要一个更具体的选择器来覆盖默认引导规则）

有用的链接：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

谢谢 shomz，对不起，如果我听起来有点傻。因此，如果我将 col-xs-12 改回 col-xs-4 并且当尺寸达到 480px 时，徽标将相互堆叠？
不客气，别抱歉——我们都在这里学习。我不确定它们中的任何一个都可以自己在 480px 以下工作。无论您决定使用哪个，请确保选择它们以应用 display:block 规则...也许您可以使用 .row div 选择器而不必担心类名。