Question

我有2列，响应式背景图像和文本叠加层垂直居中。如何根据图像的自动调整大小使文本叠加行为响应？换句话说，文本应始终根据图像高度垂直居中。

我遇到的问题是我必须定义一个高度，使文本在第一个位置垂直对齐（例如，尝试删除高度，文本将对齐顶部）。更改屏幕宽度时，背景的300px高度将被忽略（有意），背景大小为：100％自动;＆＃39;。但这并不适用于文本，因为它始终以300px的高度为中心。如何在不使用不同尺寸的各种媒体查询的情况下解决这个问题？

＆＃13;

.two-pics-1 {
  background-image: url('http://via.placeholder.com/1000x500');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px;
}
.two-pics-2 {
  background-image: url('http://via.placeholder.com/1000x500');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px !important;
}

＆＃13;

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
  <div class="row mb-5">
    <div class="col-md-6 mb-3">
      <div class="container">
        <div class="row two-pics-1">
          <div class="col-md-12 text-center my-auto">
            <h2>Setup & Support</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="container">
        <div class="row two-pics-2">
          <div class="col-md-12 text-center my-auto">
            <h2>Tech Specs</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

为了实现您的目标，您需要为您的代码定义媒体查询，并告诉它如何在不同的屏幕尺寸中表现。

使用这样的断点mixins：

.something {
   padding: 5px;
   @include media-breakpoint-up(sm) { 
     padding: 20px;
   }
   @include media-breakpoint-up(md) { 
     padding: 40px;
   }
 }

http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

v4 beta断点参考

以下是媒体查询的完整列表

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

断点＆amp;值：

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

断点＆amp;向下（切换值和向下）：

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

断点＆amp;下降值：

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its 
width

仅限断点：

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

仅限断点值（仅在值之间切换）：

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

在此处找到此信息（Using media breakpoints in Bootstrap 4-alpha）

只是为了说明我在哪里找到媒体查询详细清单!!

如果您需要帮助，请告诉我。

Bootstrap用响应式img改变文本垂直位置

1 个答案: