css 使用bootstrap flexbox准备网格布局

4zcjmb1e 于 2023-10-21 发布在 Bootstrap

关注(0)|答案(2)|浏览(160)

我需要在下面的图像中给出的视图
2

.tile {
  /* TODO: MODULE_CARDS */
  /* 1. Fill in the required properties. */
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 10px;
}
.tile img {
  /* TODO: MODULE_CARDS */
  /* 1. Fill in the required properties. */
  border-radius: 25px;
  max-width: 100%;
  height: 50vh;

}

<div class="container">
    <!-- TODO: MODULE_LAYOUT -->
    <!-- 1. Create the grid like layout as required. -->
    <div class = "row">
        <div class = "tile d-flex justify-content-center">
          <img src = "assets/bengaluru.jpg" alt  = "bengaluru" class ="tile img" >
        </div>
        <div class = "tile d-flex justify-content-center">
          <img src = "assets/kolkata.jpg" alt  = "kolkata" class ="tile img" >
        </div>
        <div class = "tile d-flex justify-content-center">
          <img src = "assets/goa.jpg" alt  = "goa" class ="tile img" >
        </div>
        <div class = "tile d-flex justify-content-center">
          <img src = "assets/mumbai.jpg" alt  = "mumbai" class ="tile img" >
        </div>
    </div>
    <div class = "row">
      <div class = "tile d-flex justify-content-center">
        <img src = "assets/singapore.jpg" alt  = "singapore" class ="tile img" >
      </div>
      <div class = "tile d-flex justify-content-center">
        <img src = "assets/dubai.jpg" alt  = "dubai" class ="tile img" >
      </div>
      <div class = "tile d-flex justify-content-center">
        <img src = "assets/malaysia.jpg" alt  = "malaysia" class ="tile img" >
      </div>
      <div class = "tile d-flex justify-content-center">
        <img src = "assets/paris.jpg" alt  = "paris" class ="tile img" >
      </div>
  </div>

我需要一个帮助，如何修复每一行的flexbox项目的图像数量。由于网页应该是响应式的，这意味着根据屏幕尺寸调整每行的图像数量

css

来源：https://stackoverflow.com/questions/65158098/preparing-grid-layout-using-bootstrap-flexbox

2条答案

按热度按时间

col17t5w1#

您可以使用flexbox进行布局。Flex wrap和width将处理每行的项目数量。你不需要行 Package 器。根据需要调整宽度和高度。我添加了一些占位符图像。
您可以使用相对 Package 器（可以是项目本身）和绝对子项（标题）来显示顶部的文本，也可以使用z索引来分层。

.tile {
        /* TODO: MODULE_CARDS */
        /* 1. Fill in the required properties. */
        box-sizing: border-box;
        padding: 20px;
        margin-bottom: 10px;
        position: absolute;
    }
    
    .tile img {
        /* TODO: MODULE_CARDS */
        /* 1. Fill in the required properties. */
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        border-radius: 25px;
        z-index: 6;
    
    }
    
    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 120vh;
        margin: auto;
    }
    
    .item {
        padding: 0;
        width: 25vh;
        height: 40vh;
        background-color: green;
        border-radius: 25px;
        position: relative;
    }
    
    .title {
        position: absolute;
        bottom: 10vh;
        z-index: 7;
        left: 30%
    }

<div class="container">
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="bengaluru" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="kolkata" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="goa" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="mumbai" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="singapore" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="dubai" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="malaysia" class="tile img">
    </div>
    <div class="item tile d-flex justify-content-center">
        <span class="title">Place</span>
        <img src="https://via.placeholder.com/250x400" alt="paris" class="tile img">
    </div>
</div>

赞(0）回复(0）举报 2023-10-21

ttp71kqs2#

有一些bootstrap col类可以做到这一点。你也可以使用响应式。Bootstrap为图像提供了一个名为img-thumbnail的类。我已经用CSS覆盖了一点，并保留了原始的CSS。

这里是一个工作示例的图像：

看看下面的片段：

**Note:**最大化您的屏幕以更好地理解。如果你想了解更多关于bootstrap的网格系统，check this link out。

.thumb {
    margin-top: 15px;
    margin-bottom: 15px;
}

.img-thumbnail {
    /* TODO: MODULE_CARDS */
    /* 1. Fill in the required properties. */
    border: none !important;
    border-radius: 25px !important;
    max-width: 100%;
    height: 50vh !important;

}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
    <!-- TODO: MODULE_LAYOUT -->
    <!-- 1. Create the grid like layout as required. -->

    <div class="row">
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="bengaluru"
                class="img-thumbnail">
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="kolkata"
                class="img-thumbnail">
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="goa"
                class="img-thumbnail">
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="mumbai"
                class="img-thumbnail">
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="singapore"
                class="img-thumbnail">
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="dubai"
                class="img-thumbnail">
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="malaysia"
                class="img-thumbnail">
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Vidhana_Soudha_sunset.jpg" alt="paris"
                class="img-thumbnail">
        </div>
    </div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 使用bootstrap flexbox准备网格布局

2条答案

相关问题

热门标签

最新问答