时间戳

首页 > 解决方案 > Bootstrap 4 图像叠加问题

css - Bootstrap 4 图像叠加问题

问题描述

我正在尝试在图像顶部创建带有文本的英雄图像。我想主要使用 bootstrap 4 来创建它，所以我不必编写很多 CSS。Bootstrap 卡有一个图像覆盖类，可以帮助在图像上放置文本。所以多亏了引导程序，我已经走到了一半，但是我在移动设备和其他方面遇到了一些问题。我是否达到了引导限制并需要一些 CSS？或者我可以修改我的引导代码并在下面修复这些问题

示例图像问题

  1. 移动文本和按钮在图像之外，我想将其保留在图像内
  2. 如何使“卡片图像覆盖”像示例一样居中（参见示例图像）。我让它向左，而不是居中。
  3. 我将 w-25 放在文本和按钮父 div 上，这样我就可以控制宽度，即使文本很长，div 也会保持在左侧（例如示例中的 lorem ipsum 文本）

我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>

        <div class="container">
                <div class="card bg-dark text-white">
                        <img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
                        <div class="card-img-overlay ">
                                    <div class="text-left w-25 ">
                                            <h2 class="card-title "> Headline</h2>
                                            <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                            <div class="">
                                                    <a href="#" class="btn btn-danger  btn-lg ">CTA to Our Locations</a>
                                            </div>
       
                                    </div>
                     
                          
                        </div>
                      </div>
        </div>




</body>

</html>
</body>

</html>

标签： csstwitter-bootstrapbootstrap-4

解决方案

该类w-25没有响应（在所有屏幕宽度上都是 25% 的宽度），但网格类（行>col*）是响应的。而是在卡片内使用row> col-*，并根据需要使用响应式 col 宽度。例如，col-lg-3 col-sm-6在 lg 及以上是 33% 宽度，在 md 和 sm 上是 50% 宽度，然后在 xs（移动设备）上变为全宽。

   <div class="card bg-dark text-white">
        <img class="card-img img-responsive" 
        src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&amp;dl=bloom-blossom-close-up-87840.jpg&amp;fm=jpg" alt="Card image" width="500px" height="500px">
        <div class="card-img-overlay d-flex align-items-center">
            <div class="row">
                <div class="text-left col-lg-3 col-sm-6">
                    <h2 class="card-title ">H2 Locations Headline</h2>
                    <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <div class="">
                        <a href="#" class="btn btn-danger  btn-lg ">CTA to Our Locations</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

使用d-flex align-items-center使card-img-overlay行垂直居中。

https://www.codeply.com/go/eRpRZj9Z8M

推荐阅读