ระยะห่างระหว่างคอลัมน์ใน Bootstrap

ฉันสร้างสิ่งนี้โดยใช้บทช่วยสอน bootstrap อย่างเป็นทางการ -›

ภาพหน้าจอ

โดยใช้โค้ดด้านล่าง -›

<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Free</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>10 users included</li>
      <li>2 GB of storage</li>
    </ul>
  </div>
</div>
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Pro</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>20 users included</li>
      <li>10 GB of storage</li>
    </ul>
    </div>
</div>
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Enterprise</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>30 users included</li>
      <li>15 GB of storage</li>
      <li>Phone and email support</li>
      <li>Help center access</li>
    </ul>
    <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
  </div>

ตอนนี้ฉันต้องการลดระยะห่างระหว่างคอลัมน์เหล่านี้ สิ่งที่สามารถทำได้เพื่อสิ่งนี้?


html bootstrap-4
person Hritika Agarwal    schedule 27.11.2020    source แหล่งที่มา

คำตอบ (2)


arrow_upward
0
arrow_downward

หากคุณดูไฟล์ CSS ของ bootstrap คุณจะพบสไตล์นี้

@media (min-width: 576px) {
  .card-deck {
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     margin-right: -15px;
     margin-left: -15px;
  }
  .card-deck .card {
     display: -ms-flexbox;
     display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

ซึ่งหมายความว่าการ์ดของคุณมีระยะขอบ 15px อยู่ระหว่างนั้น

ดังนั้นคุณต้องแทนที่ด้วยค่าของคุณในไฟล์ CSS

ชอบ

@media (min-width: 576px) {

    .card-deck {
         margin-right: -10px;
         margin-left: -10px;
     }
     .card-deck .card {
         margin-right: 10px;
         margin-left: 10px;  
     }
  }

ตัวอย่างซอ https://jsfiddle.net/1g46tLc9/

person Kenny    schedule 27.11.2020

arrow_upward
0
arrow_downward

คุณต้องเพิ่มคลาส m, p, mr, mb ฯลฯ ให้กับ div ของคุณ

ลองดูโพสต์นี้ซึ่งอธิบายโพสต์ทั้งหมดนี้

หมายเหตุ: นี่คือวิธีที่คุณสามารถทำได้โดยใช้ bootstrap หากคุณต้องการเพิ่มค่าเฉพาะเจาะจง ให้ตั้งค่าระยะขอบของคลาสบูตสแตรปเหล่านี้เป็น 0 แล้วเพิ่มค่าระยะขอบที่กำหนดเองของคุณให้กับการ์ด/div

person Tanish Surana    schedule 27.11.2020