个人中心
gpt4 book ai didi

html - 如何定位 Twitter Bootstrap <768px 和 480px 断点

转载 作者：行者123 更新时间：2023-11-28 06:56:43 25 4
gpt4 key购买 nike

我想了解如何定位 768 像素以下的屏幕尺寸，特别是 480 像素的屏幕尺寸。我目前正在尝试创建一个页面，该页面将显示 3 个不同网站的 3 个 Logo ，这很好用，但在达到 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”类时，因为 Logo 在屏幕上看起来太大，它应该类似于 col-sm 并且像 col-xs-4 一样分布在 4 列中。这解决了这个问题，但是当我到达 480px 的断点时， Logo 看起来太小，据我所知，最低断点是 col-xs，它针对 768px 的屏幕尺寸，所以我不确定如何解决这个问题问题。

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

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

最佳答案

这里有 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>

这里是垂直和水平居中的例子。我将规则放在媒体查询中，因此它们只能在 480px 以上工作，因为它可能对较小设备上的这种显示有利也可能不利:媒体查询本身可以删除，因为它不会改变任何其他内容。这些也是新的 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>

关于html - 如何定位 Twitter Bootstrap <768px 和 480px 断点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33468625/

25 4 0
文章推荐： swift - NSTextView、NSFontManager 和 changeAttributes()
文章推荐： javascript - 使用 find 链接 div 的链接选择器
文章推荐： Javascript 位置变量无法正确更新
文章推荐： c++ - 适用于C++的wso2 Web服务框架中的JSON支持
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com