วิธีการเพิ่มระยะขอบด้านบนให้กับclass="row"องค์ประกอบโดยใช้กรอบ bootstrap twitter?

การแก้ไขหรือลบล้างแถวใน bootstrap ของ Twitter เป็นความคิดที่ไม่ดีเพราะนี่เป็นส่วนหลักของนั่งร้านหน้าและคุณจะต้องมีแถวที่ไม่มีระยะขอบบนสุด

เพื่อแก้ปัญหานี้ให้สร้าง "top-buffer" คลาสใหม่ที่เพิ่มระยะขอบมาตรฐานที่คุณต้องการ

.top-buffer { margin-top:20px; }

จากนั้นใช้มันใน divs แถวที่คุณต้องการระยะขอบบน

<div class="row top-buffer"> ...

ตกลงเพียงเพื่อแจ้งให้คุณทราบว่าเกิดอะไรขึ้นตอนนี้ฉันคงใช้คลาสใหม่บางอย่างตามที่ Acyra พูดไว้ด้านบน:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

เมื่อใดก็ตามที่ฉันต้องการฉัน <div class="row top7"></div>

เพื่อการตอบสนองที่ดีขึ้นคุณสามารถเพิ่มmargin-top:7%แทน5pxตัวอย่างเช่น: D

Bootstrap 3

.form-groupหากคุณจำเป็นต้องแยกจากกันในแถวบูตคุณก็สามารถใช้ สิ่งนี้จะเพิ่มระยะขอบ 15px ที่ด้านล่างของแถว

ในกรณีของคุณเพื่อให้ได้มาร์จิ้นสูงสุดคุณสามารถเพิ่มคลาสนี้ให้กับ.rowองค์ประกอบก่อนหน้า

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

คุณสามารถใช้คลาสระยะห่างในตัว

<div class="row mt-3"></div>

"t" ในชื่อคลาสทำให้ใช้ได้กับด้าน "top" เท่านั้นมีคลาสที่คล้ายกันสำหรับล่าง, ซ้าย, ขวา จำนวนกำหนดขนาดพื้นที่

สำหรับการเว้นวรรคBootstrap 4ควรใช้โดยใช้

คลาสยูทิลิตี้ชวเลข

ในรูปแบบต่อไปนี้:

{อสังหาริมทรัพย์} {ด้าน} - {} ขนาด

สถานที่ให้บริการเป็นหนึ่งใน:

• m - สำหรับคลาสที่กำหนดระยะขอบ
• p - สำหรับชั้นเรียนที่กำหนดช่องว่างภายใน

ด้านไหนเป็นหนึ่งใน:

• t - สำหรับคลาสที่ตั้งค่าระยะขอบหรือการเติมด้านบน
• b - สำหรับคลาสที่ตั้งค่าระยะขอบด้านล่างหรือช่องว่างภายในด้านล่าง
• l - สำหรับคลาสที่ตั้งค่าระยะขอบซ้ายหรือช่องว่างภายในซ้าย
• r - สำหรับคลาสที่ตั้งค่าระยะขอบขวาหรือช่องว่างภายในขวา
• x - สำหรับคลาสที่ตั้งค่าทั้ง * -left และ * -right
• y - สำหรับคลาสที่ตั้งค่าทั้ง * -top และ * -bottom
• blank - สำหรับคลาสที่กำหนดระยะขอบหรือช่องว่างภายในทั้ง 4 ด้านขององค์ประกอบ

ขนาดไหนเป็นหนึ่งใน:

• 0 - สำหรับคลาสที่กำจัดระยะขอบหรือช่องว่างภายในโดยการตั้งค่าเป็น 0
• 1 - (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งระยะขอบหรือช่องว่างภายในเป็น $ spacer * .25
• 2 - (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งระยะขอบหรือช่องว่างภายในเป็น $ spacer * .5
• 3 - (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งระยะขอบหรือช่องว่างภายในเป็น $ spacer
• 4 - (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งระยะขอบหรือช่องว่างภายในเป็น $ spacer * 1.5
• 5 - (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งระยะขอบหรือช่องว่างภายในเป็น $ spacer * 3
• อัตโนมัติ - สำหรับคลาสที่ตั้งระยะขอบเป็นอัตโนมัติ

ดังนั้นคุณควรทำสิ่งเหล่านี้:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

อ่านเอกสารสำหรับคำอธิบายเพิ่มเติม ลองตัวอย่างสดผ่านที่นี่

บางครั้งขอบด้านบนอาจทำให้เกิดปัญหาการออกแบบ:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

ดังนั้นฉันขอแนะนำให้สร้าง "ระดับขอบล่าง" แทน "ระดับบนสุดขอบ" และใช้กับรายการก่อนหน้า

หากคุณใช้ Bootstrap การนำเข้าไฟล์ Bootstrap น้อยกว่าให้ลองกำหนดคลาสที่ขอบด้านล่างด้วยการเว้นวรรคธีม Bootstrap ตามสัดส่วน:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

ฉันเพิ่มคลาสเหล่านี้ในสไตล์ชีท bootstrap ของฉัน

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

ตัวอย่าง

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

ฉันใช้คลาสเหล่านี้เพื่อเปลี่ยนระยะขอบบน:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

เมื่อฉันต้องการองค์ประกอบที่จะมีระยะห่าง 2em จากองค์ประกอบข้างต้นฉันใช้มันเช่นนี้

<div class="row margin-top-20">Something here</div>

หากคุณเป็นพิกเซลล่วงหน้าให้เปลี่ยน em เป็น px เพื่อให้เป็นไปตามที่คุณต้องการ

คุณสามารถใช้คลาสต่อไปนี้สำหรับ bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

Bootstrap 4 alpha, สำหรับ margin-top: ชื่อคลาส CSS แบบย่อ, mt-1, mt-2 (mt-lg-5, mt-sm-2) เหมือนกันสำหรับด้านล่าง, ขวา, ซ้ายและคุณยังมีคลาสอัตโนมัติ ml- รถยนต์

    <div class="mt-lg-1" ...>

หน่วยมาจาก1ถึง5: ใน variables.scss ซึ่งหมายความว่าถ้าคุณตั้งค่า mt-1 จะให้ 0.25rem ของระยะขอบบน

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

อ่านเพิ่มเติมได้ที่นี่

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

เพิ่มในคลาสนี้ในไฟล์. css:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

หรือสร้างคลาสใหม่และเพิ่มไปยังองค์ประกอบ

.rowSpecificFormName td {
    margin-top: 50px;
}

หากคุณต้องการเปลี่ยนเพียงหนึ่งหน้าเพิ่มกฎสไตล์ต่อไปนี้:

 #myCustomDivID .row {
     margin-top:20px;
 }

ใน Bootstrap 4 alpha + คุณสามารถใช้สิ่งนี้

class margin-bottom-5

คลาสมีชื่อโดยใช้รูปแบบ: {property}-{sides}-{size}

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Bootstrap3

CSS (เย็บกระดาษเท่านั้นโดยไม่มีขอบ):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (ระยะขอบที่เท่ากันคือ 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

การใช้งาน:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(ด้วย SASS หรือ LESS 15px อาจเป็นตัวแปรจาก bootstrap)

<div class="row row-padding">

รหัสง่าย ๆ

คุณสามารถเพิ่มรหัสนี้:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

เพียงแค่ใช้ตัวbs3-upgradeช่วยนี้สำหรับการเว้นวรรคและการกำหนดข้อความ

https://github.com/studija/bs3-upgrade

หากคุณใช้ BootStrap 3.3.7 คุณสามารถใช้ bootstrap-spacer library โอเพ่นซอร์สผ่าน NPM

npm install bootstrap-spacer

หรือคุณสามารถไปที่หน้า GitHub:

https://github.com/chigozieorunta/bootstrap-spacer

นี่คือตัวอย่างของวิธีการทำงานของแถวพื้นที่โดยใช้คลาส. row-spacer:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

หากคุณต้องการช่องว่างระหว่างคอลัมน์คุณสามารถเพิ่มคลาส. row-col-spacer:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

และคุณยังสามารถรวมคลาส. row-spacer & .row-col-spacer เข้าด้วยกัน:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

เคล็ดลับของฉัน ไม่ค่อยสะอาด แต่ทำงานได้ดีสำหรับฉัน

<p>&nbsp;</p>