เพิ่มช่องว่างแนวตั้งโดยใช้ Twitter Bootstrap?

วิธีที่ดีที่สุดในการเพิ่มช่องว่างในแนวตั้งโดยใช้ Bootstrap ของ Twitter คืออะไร

ตัวอย่างเช่นสมมติว่าฉันกำลังสร้างหน้า Landing Page และต้องการพื้นที่ว่างเปล่าด้านบนและด้านล่างปุ่มเล็กน้อย (100px) เห็นได้ชัดว่าฉันสามารถสร้างคลาสที่แน่นอนสำหรับปุ่มนั้น แต่ผมจะคิดว่าเงินทุนควรจะมีความแห้งวิธีของการเพิ่มช่องว่างในแนวตั้ง

ในBootstrap 4มีutilites ระยะห่าง

อ้างถึงเอกสารสำหรับสัญลักษณ์ที่ใช้ :

ยูทิลิตี้การเว้นวรรคที่ใช้กับจุดพักทั้งหมดจากxsถึงxlไม่มีตัวย่อจุดพักในนั้น นี่เป็นเพราะคลาสเหล่านั้นถูกนำไปใช้ตั้งแต่min-width: 0ขึ้นไปและดังนั้นจึงไม่ถูกผูกไว้ด้วยเคียวรีสื่อบันทึก จุดพักที่เหลือจะรวมถึงตัวย่อเบรกพอยต์

เรียนจะถูกตั้งชื่อโดยใช้รูปแบบ{property}{sides}-{size}สำหรับxs และ{property}{sides}-{breakpoint}-{size}สำหรับsm, md, และlgxl

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

• m - สำหรับคลาสที่ตั้งค่าไว้ margin
• p - สำหรับคลาสที่ตั้งค่าไว้ padding

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

• t- สำหรับคลาสที่ตั้งค่าmargin-topหรือpadding-top
• b- สำหรับคลาสที่ตั้งค่าmargin-bottomหรือpadding-bottom
• l- สำหรับคลาสที่ตั้งค่าmargin-leftหรือpadding-left
• r- สำหรับคลาสที่ตั้งค่าmargin-rightหรือpadding-right
• x- สำหรับคลาสที่ตั้งค่าทั้งสอง*-leftและ*-right
• y- สำหรับคลาสที่ตั้งค่าทั้งสอง*-topและ*-bottom
• blank - สำหรับคลาสที่ตั้งค่าmarginหรือpaddingทั้ง 4 ด้านขององค์ประกอบ

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

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

ดังนั้นเพื่อให้มีพื้นที่แนวตั้งเพิ่มเติมด้านบนและด้านล่างขององค์ประกอบที่คุณจะใช้my-5คลาส

ใน v2 ไม่มีอะไรในตัวสำหรับพื้นที่แนวตั้งนั้นดังนั้นคุณจะต้องติดกับคลาสที่กำหนดเอง สำหรับความสูงที่น้อยกว่าฉันมักจะแค่<div class="control-group">กดปุ่ม

การห่องาน แต่เมื่อคุณต้องการพื้นที่ฉันชอบ:

<div class="col-xs-12" style="height:50px;"></div>

ขออภัยที่จะขุดหลุมฝังศพเก่าที่นี่ แต่ทำไมไม่ทำเช่นนี้?

<div class="form-group">
    &nbsp;
</div>

มันจะเพิ่มช่องว่างความสูงขององค์ประกอบรูปแบบปกติ

ดูเหมือนว่าประมาณ 1 บรรทัดในแบบฟอร์มนั้นมีขนาดประมาณ 50px (47px สำหรับองค์ประกอบของฉันที่ฉันเพิ่งตรวจสอบ) นี่คือรูปแบบแนวนอนโดยมีป้ายกำกับที่ 2col ด้านซ้ายและอินพุตที่ด้านขวา 10col ดังนั้นพิกเซลของคุณอาจแตกต่างกันไป

เนื่องจากของฉันนั้นมีขนาด 50px ฉันจะสร้างตัวเว้นวรรคสูง 50px โดยไม่มีระยะขอบหรือขยาย

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

ฉันรู้ว่านี้คือเก่า แต่ผมมาที่นี่ค้นหาสิ่งเดียวกันผมพบว่าเงินทุนมีความช่วยเหลือบล็อกที่มีประโยชน์มากสำหรับสถานการณ์เหล่านี้:

<div class="help-block"></div>

สำหรับเวอร์ชั่น 3 ดูเหมือนจะไม่มีวิธี "bootstrap" เพื่อให้ได้สิ่งนี้อย่างเป็นระเบียบ

panelเป็นwellและform-groupทั้งหมดให้บางส่วนระยะห่างแนวตั้ง

วิธีแก้ปัญหาการเว้นวรรคแนวตั้งที่เป็นทางการที่เฉพาะเจาะจงมากขึ้นเห็นได้ชัดคือในแผนงานสำหรับ bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

ฉันแค่สร้างคลาส div โดยใช้ความสูงที่หลากหลายเช่น

<div class="divider-10"></div>

CSS คือ:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

เพียงแค่สร้างระดับ divider สำหรับสิ่งที่เคยสูงที่มีความจำเป็น

เคล็ดลับของฉัน ไม่หรูหรา แต่ใช้งานได้:

<p>&nbsp;</p>

<br/>ใช้เพียงแค่ ฉันพบว่าตัวเองอยู่ที่นี่กำลังมองหาคำตอบสำหรับคำถามนี้แล้วรู้สึกโง่ ๆ ที่ไม่คิดจะใช้ตัวแบ่งบรรทัดอย่างง่ายตามที่ผู้ใช้ JayKilleen แนะนำในการแสดงความคิดเห็น

ฉันรู้ว่ามันเก่าและมีวิธีแก้ปัญหาที่ดีหลายอย่างที่โพสต์ไปแล้ว แต่วิธีแก้ปัญหาที่ง่ายสำหรับฉันคือ CSS ต่อไปนี้

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

จากนั้นสร้าง div ใน html ของคุณ

<div class="divider"></div>

ฉันพยายามใช้<div class="control-group">และมันไม่ได้เปลี่ยนรูปแบบของฉัน มันไม่ได้เพิ่มพื้นที่แนวตั้ง ทางออกสำหรับฉันคือ:

<ol style="visibility:hidden;"></ol>

หากนั่นไม่ได้ให้พื้นที่แนวตั้งเพียงพอคุณสามารถเพิ่มได้มากขึ้นโดยการเพิ่ม<li>&nbsp;</li>แท็กที่ซ้อนกัน

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

มีอะไรมากไปกว่าแห้ง

.btn {
    margin-bottom:5px;
}