css 我怎么能用bootstrap 5实现这个设计呢？一个是集装箱内一个是集装箱外

r8xiu3jd 于 2023-05-08 发布在 Bootstrap

关注(0)|答案(1)|浏览(112)

我试图在Bootstrap 5.3中实现这个特殊的设计。

这应该在展示窗口上，展示窗口的代码应该在文本下面：

<div class="showcase d-flex flex-column">

        <div class="container p-4">
            <div class="row showcase-row mt-5 gap-lg-0 gap-5">
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>BMW 420i</h4>
                    <h5>M Sport</h5>
                    <img src="/app/static/img/togg art.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Mercedes-Benz GLB</h4>
                    <h5>200 AMG</h5>
                    <img src="/app/static/img/8.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Audi E-Tron GT</h4>
                    <h5>GT Quattro</h5>
                    <img src="/app/static/img/9.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Ferrari F8</h4>
                    <h5>Tributo</h5>
                    <img src="/app/static/img/4.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Lamborghini Aventador</h4>
                    <h5>LP750-4</h5>
                    <img src="/app/static/img/5.png" alt="">
                </div>
                <div class="col-lg-4 col-12 showcase-item">
                    <h4>Aston Martin Vantage</h4>
                    <h5>V8 Vantage Roadster</h5>
                    <img src="/app/static/img/6.png" alt="">
                </div>
            </div>
        </div>
        
    </div>

编辑：
我找到的当前解决方案

<span class="text-uppercase fw-bold position-absolute" style="font-size: 210px; opacity: 0.1;">owcase</span>

    <div class="showcase container p-4 d-flex flex-column" style="margin-top: 100px;">
   
        <span class="fs-3 fw-bold">Showcase</span>
        <span class="fs-5 fw-bold" style="opacity: 0.4;">Ads</span>
        
    </div>

如果你有更好的方法，不要介意分享它！

css

来源：https://stackoverflow.com/questions/76196880/how-could-i-archieve-this-design-with-bootstrap-5-a-spans-stacked-one-is-inside

1条答案

按热度按时间

elcex8rz1#

使用相对位置和z索引的组合
希望这有帮助（我已经添加了一个填充到身体和一个保证金部分给予一个更容易看的例子）

body {
  padding: 50px;
}

.section {
  position: relative;
  border: 1px solid gray;
}

.back-title {
  color: #ababab;
  font-size: 100px;
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: 1;
}

.content-container {
  z-index: 2;
  /** position relative to make z-index work and not modify behavior */
  position: relative;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="section container">
  <h1 class="back-title">
    Showcase
  </h1>
   <div class="content-container row gap-lg-0 gap-5">
     <div class="col-lg-4 col-12 showcase-item">
       <h4>BMW 420i</h4>
       <h5>M Sport</h5>
       <img src="/app/static/img/togg art.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Mercedes-Benz GLB</h4>
       <h5>200 AMG</h5>
       <img src="/app/static/img/8.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Audi E-Tron GT</h4>
       <h5>GT Quattro</h5>
       <img src="/app/static/img/9.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Ferrari F8</h4>
       <h5>Tributo</h5>
       <img src="/app/static/img/4.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Lamborghini Aventador</h4>
       <h5>LP750-4</h5>
       <img src="/app/static/img/5.png" alt="">
     </div>
     <div class="col-lg-4 col-12 showcase-item">
       <h4>Aston Martin Vantage</h4>
       <h5>V8 Vantage Roadster</h5>
       <img src="/app/static/img/6.png" alt="">
     </div>
  </div>
</section>

赞(0）回复(0）举报 2023-05-08

我来回答

css 我怎么能用bootstrap 5实现这个设计呢？一个是集装箱内一个是集装箱外

1条答案

相关问题

热门标签

最新问答