Question

我正在尝试创建一个英雄图像，图像顶部带有文字。我想使用bootstrap 4来创建它，所以不必写很多CSS。引导卡具有图像覆盖类，该类有助于将文本放在图像上。所以由于引导程序，我已经中途了，但是我在移动和其他方面遇到了一些问题。我是否达到了引导程序限制并需要一些CSS？或者我可以修改引导程序代码并在

下解决这些问题

示例图片问题

关于移动文本和按钮不在图像外，我想将其保留在图像内
如何像示例一样使“ card-image-overlay”居中居中（请参见示例图像）。一世使它离开，而不是居中。
我将w-25放在文本和按钮父div上，这样我就可以控制宽度，即使文本很长（例如示例中的lorem ipsum文本），div仍位于左侧。

我的代码

<!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>

Answer 1

w-25类没有响应（在所有屏幕宽度上均为25％宽度），但是网格类（行> col *）具有响应能力。取而代之的是在卡内使用row> 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

Bootstrap 4图像覆盖问题

1 个答案: