Tambahkan spasi putih vertikal menggunakan Twitter Bootstrap?

Apa cara terbaik untuk menambahkan spasi putih vertikal menggunakan Bootstrap Twitter?

Sebagai contoh, katakanlah saya membuat halaman arahan dan ingin sedikit (100px) spasi kosong di atas dan di bawah tombol tertentu. Jelas, saya bisa membuat kelas tertentu untuk tombol khusus itu. Tapi, saya akan berpikir bahwa Bootstrap harus memiliki cara KERING untuk menambahkan ruang kosong vertikal.

Di Bootstrap 4 ada spasi pemanfaatan .

Mengutip dokumentasi untuk notasi bekas :

Utilitas spasi yang berlaku untuk semua breakpoint, dari xshingga xl, tidak memiliki singkatan breakpoint di dalamnya. Ini karena kelas-kelas tersebut diterapkan dari min-width: 0dan ke atas, dan dengan demikian tidak terikat oleh kueri media. Breakpoint yang tersisa, bagaimanapun, menyertakan singkatan breakpoint.

Kelas-kelas diberi nama menggunakan format {property}{sides}-{size}untuk xs dan {property}{sides}-{breakpoint}-{size}untuk sm, md, lg, dan xl.

Di mana properti adalah salah satu dari:

• m - untuk kelas yang ditetapkan margin
• p - untuk kelas yang ditetapkan padding

Di mana sisi adalah salah satu dari:

• t- untuk kelas yang mengatur margin-topataupadding-top
• b- untuk kelas yang mengatur margin-bottomataupadding-bottom
• l- untuk kelas yang mengatur margin-leftataupadding-left
• r- untuk kelas yang mengatur margin-rightataupadding-right
• x- untuk kelas yang mengatur keduanya *-leftdan*-right
• y- untuk kelas yang mengatur keduanya *-topdan*-bottom
• kosong - untuk kelas yang mengatur marginatau paddingpada semua 4 sisi elemen

Di mana ukuran adalah salah satu dari:

• 0 - untuk kelas yang menghilangkan margin atau bantalan dengan mengaturnya 0
• 1- (secara default) untuk kelas yang mengatur marginatau paddingke$spacer * .25
• 2- (secara default) untuk kelas yang mengatur marginatau paddingke$spacer * .5
• 3- (secara default) untuk kelas yang mengatur marginatau paddingke$spacer
• 4- (secara default) untuk kelas yang mengatur marginatau paddingke$spacer * 1.5
• 5- (secara default) untuk kelas yang mengatur marginatau paddingke$spacer * 3

Jadi, untuk memiliki ruang vertikal ekstra di atas dan di bawah elemen, Anda akan menggunakan my-5kelas.

Di v2, tidak ada built-in untuk ruang vertikal sebanyak itu, jadi Anda harus tetap menggunakan kelas kustom. Untuk ketinggian yang lebih kecil, saya biasanya hanya melempar <div class="control-group">tombol.

Membungkus bekerja tetapi ketika Anda hanya ingin ruang, saya suka:

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

Maaf menggali kuburan tua di sini, tapi mengapa tidak melakukan ini saja?

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

Ini akan menambahkan spasi ketinggian elemen bentuk normal.

Tampaknya sekitar 1 baris pada formulir kira-kira 50px (47px pada elemen saya, saya baru saja memeriksa). Ini adalah bentuk horizontal, dengan label di kiri 2col dan input di kanan 10col. Jadi piksel Anda dapat bervariasi.

Karena tambang saya pada dasarnya adalah 50px, saya akan membuat spacer setinggi 50px tanpa margin atau bantalan;

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

Saya tahu ini sudah tua, tetapi saya datang ke sini untuk mencari hal yang sama, saya menemukan bahwa Bootstrap memiliki blok bantuan, sangat berguna untuk situasi ini:

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

Untuk versi 3 tampaknya tidak ada cara "bootstrap" untuk mencapai ini dengan rapi.

A panel, a welldan a form-groupsemuanya menyediakan spasi vertikal.

Solusi spasial vertikal spesifik yang lebih formal, tampaknya, pada peta jalan untuk bootstrap v4

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

Saya hanya menciptakan kelas div menggunakan berbagai ketinggian yaitu

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

CSS-nya adalah:

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

Cukup buat kelas pembagi untuk ketinggian apa pun yang dibutuhkan.

Trik saya. Tidak elegan, tetapi berfungsi:

<p>&nbsp;</p>

Gunakan saja <br/>. Saya menemukan diri saya di sini mencari jawaban untuk pertanyaan ini dan kemudian merasa agak konyol karena tidak memikirkan menggunakan jeda baris sederhana seperti yang disarankan oleh pengguna JayKilleen dalam komentar.

Saya tahu ini sudah lama dan ada beberapa solusi bagus yang sudah diposting, tetapi solusi sederhana yang bekerja untuk saya adalah CSS berikut

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

dan kemudian buat div di html Anda

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

Saya mencoba menggunakan <div class="control-group">dan itu tidak mengubah tata letak saya. Itu tidak menambah ruang vertikal. Solusi yang berhasil bagi saya adalah:

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

Jika itu tidak memberi Anda cukup ruang vertikal, Anda bisa mendapatkan lebih banyak dengan menambahkan <li>&nbsp;</li>tag bersarang .

<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

Tidak ada yang lebih KERING selain

.btn {
    margin-bottom:5px;
}