Bootstrap 在小屏幕上一一制作div

Question

您好，我正在使用 bootstrap css 库 5.1.3，我想设计一个左侧图像和右侧文本的简单卡片。它在大尺寸屏幕上运行完美。但我不知道如何在图像底部首先制作图像，然后制作文本内容。你能帮我修一下吗？如果当前代码无法修复，请建议我使用其他方法来实现此卡片设计？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container py-4">
        <div class="bg-light d-flex"> 
            <div class="flex-shrink-0">
                <img src="https://i.ibb.co/kDv9tyc/img.jpg" height="350">
            </div>
              
            <div class="flex-grow-1 px-3">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

大屏输出：

当前小屏输出：

预期输出：

Answer 1

你正在使用 bootstrap 的 Sicne，我相信你应该使用 Bootstrap grid system，这会把它变成这样的东西：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container">
        <div class="bg-light row"> 
            <div class="col-md-3">
                <img class="w-100" src="https://i.ibb.co/kDv9tyc/img.jpg">
            </div>
              
            <div class="col-md-9">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

Answer 2

您只需要使用 bootstrap 的弹性网格。您创建一个包含两列的行，并使它们像这样响应。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
      </head>
<body>
    <div class="container py-4">
        <div class="bg-light row"> 
            <div class="col-md-3 p-3">
                <img src="https://i.ibb.co/kDv9tyc/img.jpg" class="my-image text-center img-fluid">
            </div>
              
            <div class="col-md-9 p-3">
                <h1>Title</h1>
                <h2>SubText</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in fugit aspernatur perferendis repudiandae accusantium illum autem hic numquam, non optio tempore, omnis, exercitationem quidem atque iusto mollitia deleniti. Eos minima numquam rem quis ullam quam repudiandae, voluptatibus temporibus dolorem quidem? In cumque exercitationem dicta fugit ipsum facilis quaerat consequuntur eligendi a culpa cum sed ab, magni earum voluptatem? Id et velit enim reiciendis doloribus veniam distinctio alias mollitia, repellendus quisquam ab eos incidunt corrupti earum quidem laudantium quae suscipit.</p>
            </div> 
       </div>
</body>
</html>

CSS 您想要将 height 从 html 文件的前面移动到 CSS 文件。此媒体查询表示，对于所有屏幕 768px 或更高，使图像的高度 350px。

同时将图片的宽度设置为 100%。

img.my-image{
      width:100%
  }
/* // Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
   img.my-image{
     height:350px;
   
    }
 }

见下方码笔：

https://codepen.io/shingai/pen/vYpbdKB

Bootstrap 在小屏幕上一一制作div

Bootstrap make div one by one in small screen

html

css

bootstrap-5