สร้างจุดสามจุดในแนวตั้งพร้อมสแปนและจัดแนวให้ตรงกัน

ฉันกำลังพยายามสร้างจุดแนวตั้งสามจุดและจัดแนวด้านล่างซ้ายของคอนเทนเนอร์ด้วย css และ bootstrap 5 เหมือนกับรูปด้านล่าง:

ป้อนคำอธิบายรูปภาพที่นี่

HTML และ CSS ของฉัน:

.dot {
  border-radius: 50%;
  height: 12px;
  width: 12px;
  background: linear-gradient(90deg, #76b3fe, #8680e4);
}

.selected-dot {
  height: 20px;
  width: 20px;
  background: #97cdfe;
}
<section class="slider-bg-1 d-flex align-items-end">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
        <h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
        <h6 claas="caption-text-color">Get your freebie template now</h6>
        <div class="d-lg-flex">
          <div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
        </div>
      </div>
      <div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
        <img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
      </div>
    </div>
  </div>

  <span class="dot selected-dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</section>

นี่คือเอาต์พุตของฉัน ป้อนคำอธิบายรูปภาพที่นี่

ฉันจะจัดแนวแนวตั้งและย้ายไปที่ด้านซ้ายล่างของคอนเทนเนอร์ได้อย่างไร เพราะเมื่อฉันใช้ div เพื่อห่อมันจะหายไป


html alignment css bootstrap-5
person CaRL    schedule 18.12.2020    source แหล่งที่มา

คำตอบ (2)


arrow_upward
2
arrow_downward

ขั้นที่ 1: ห่อจุดต่างๆ ไว้ในภาชนะ ฉันใช้ส่วนกับชั้นเรียน: .dot-wrapper ประการที่ 2: ให้กระดาษห่อ width: min-content; ด้วยเหตุนี้ มันจะกว้างเท่ากับจุดที่เลือกเท่านั้น ประการที่ 3: หากต้องการสร้างจุดศูนย์กลาง ให้เว้นระยะห่างทางซ้ายและขวาของอัตโนมัติ

.dot {
  border-radius: 50%;
  height: 12px;
  width: 12px;
  background: linear-gradient(90deg, #76b3fe, #8680e4);
  margin: 5px auto;
}

.selected-dot {
  height: 20px;
  width: 20px;
  background: #97cdfe;
}

.dot-wrapper {
  width: min-content;
}
<section class="slider-bg-1 d-flex align-items-end">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
        <h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
        <h6 claas="caption-text-color">Get your freebie template now</h6>
        <div class="d-lg-flex">
          <div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
        </div>
      </div>
      <div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
        <img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
      </div>
    </div>
  </div>

  <section class="dot-wrapper">
    <div class="dot selected-dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </section>
</section>

person tacoshy    schedule 18.12.2020

arrow_upward
2
arrow_downward

มันค่อนข้างง่าย คุณสามารถพันจุดด้วย div container แบบนี้ได้

<!--Column Dots -->
<div class="dot-container">
  <span class="dot selected-dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

และจัดรูปแบบคอนเทนเนอร์ตามด้านล่างนี้

.dot-container{
width: 15px;
display: flex;
flex-direction:column;
align-items:center;
}

และเพื่อสไตล์ที่ดีขึ้น ให้ dot คลาส amrgin เช่น margin: 3px 0;

นี่คือ codpen : https://codepen.io/shammlo/pen/QWKggNX?editors=1100

person sham    schedule 18.12.2020