Tambahkan spasi putih vertikal menggunakan Twitter Bootstrap?


162

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.

Jawaban:


39

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.


3
Bisakah Anda memberikan contoh string kelas yang valid?
Ngarai Kolob

Bagus! Ini bagus.
Tiki

51

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.


8
atau <div class = "btn-toolbar">
dyurkavets

9
Terima kasih. Saya sekarang telah membuat beberapa kelas spacer10, spacer50, dll untuk penggunaan ini. Saya melihat ada permintaan fitur di github untuk ini sudah: bit.ly/R9oap9
Ryan

1
@Ryan: Bagus, tidak melihat permintaan tarik. Saya sedikit berkonflik dengan itu. Bootstrap hampir seluruhnya bersifat presentasi (dan nyaman), tetapi jika Anda menyipitkan mata cukup keras untuk mengabaikan semua HTML tambahan, Anda dapat menurunkan semantik darinya. Penspasian vertikal adalah murni presentasi, jadi saya pikir sebaiknya dilakukan dengan kelas / ID kustom.
jmdeldin

2
Ini untuk v2, tetapi sepertinya v3 telah meminimalkan jarak sekitar .btn-toolbar, jadi Anda harus menambahkan kelas baru dengan margin Anda sendiri.
jmdeldin

3
Rupanya permintaan fitur github telah ditutup dan fitur tersebut dapat membuatnya masuk ke Bootstrap v4. bit.ly/R9oap9
Ryan

48

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

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

16
Menambahkan gaya inline saat bekerja dengan Bootstrap umumnya bukan ide yang baik. Setidaknya harus masuk ke CSS.
alexykot

2
perhatikan bahwa "col-xs-12" persis sama dengan tidak memiliki kelas sama sekali
Soldeplata Saketos

34

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>

1
Ini menambah ruang di bawah grup tetapi tidak di atas
icc97

Tentu saja itu, itulah yang dia minta, cara untuk menambahkan ruang kosong vertikal. Jika Anda memerlukan grup formulir kustom atau baris atau bahkan tombol, buat kelas Anda sendiri untuk menambahkannya, menimpa margin. Yaitu: class = "form-group spaced-group" dan ".spaced-group {margin-top: 15px! Important; margin-bottom: 15px! Important;} ... Ini hanya css-sense yang umum.
Wade

OP secara khusus bertanya: "sedikit (100px) ruang putih kosong di atas dan di bawah tombol tertentu"
icc97

1
Tidak, itu contoh, bukan pertanyaannya. Pertanyaannya adalah "Apa cara terbaik untuk menambahkan ruang kosong vertikal menggunakan Bootstrap Twitter?" - ruang kosong vertikal berbeda dari margin pada elemen tertentu. Jika dia melakukannya untuk semua tombol, dia bisa mengubah margin btn atau membuat kelas sendiri seperti "btn-spaced" dengan margin yang diinginkan. Jika dia hanya ingin cara untuk menambah celah di mana pun dia mau, spacer dengan ketinggian tetap seperti yang saya jawab adalah yang dia butuhkan. Dia mengajukan satu pertanyaan, dan memberi contoh yang lain. Saya berasumsi dia tahu CSS cukup untuk tahu dia bisa mengesampingkan margin.
Wade

Karena dia mengatakan metode KERING, dan tombol, maka saya akan membuat kelas tombol dengan margin yang saya inginkan: btn-spaced. Jika bukan hanya tombol, maka margin umum yang akan berlaku untuk baris, grup formulir, apa pun. Seperti class = "row space-small" atau class = "form-group space-medium" .. Di mana kecil menengah dan besar hanyalah varian dari margin, dan dapat diterapkan pada apa saja. - Sulit mengatakan mana yang diinginkan op. Hanya untuk tombol atau hanya untuk elemen apa pun ..
Wade

24

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>

21

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


5
.form-group tampaknya merupakan pilihan terbaik karena css terbatas pada margin-bottom: 15px. .well dan .panel tidak boleh digunakan jika Anda ingin cukup menambahkan beberapa spasi karena mereka memiliki atribut lain (seperti latar belakang, padding, perbatasan, dll)
xaa

9

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.


8

Trik saya. Tidak elegan, tetapi berfungsi:

<p>&nbsp;</p>

2
@JayKilleen +1 Anda harus memposting itu sebagai jawaban. Mungkin orang menjadi bergantung pada kerangka kerja dan mulai melupakan dasar-dasarnya.
ADJenks

5

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.


Kelemahannya adalah Anda tidak mendapatkan kontrol 100px yang tepat , tetapi seharusnya bekerja untuk menambah jumlah ruang yang masuk akal.
mix3d

1
@ mix3d, Anda ada di sana, pada awalnya saya tidak memperhatikan bahwa dia peduli dengan 100px. Saya pikir dia hanya ingin "sedikit". Dia pasti bisa membuat kelas penolongnya sendiri seperti yang disarankan semua orang. Tetapi karena postingan ini sudah berumur bertahun-tahun, ia sekarang bisa saja meng-upgrade ke bootstrap 4 untuk penspasian yang tepat, atau mengambil kelas helper darinya.
ADJenks

5

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>

4

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 .


Terima kasih, dan saran Anda akan bekerja dengan atau tanpa Bootstrap. Tetapi pertanyaannya secara khusus tentang menggunakan Bootstrap Twitter untuk menambahkan spasi.
Jonathan

1
<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


1
Bagaimana ini merupakan jawaban untuk pertanyaan itu?
Matt S

Ia menambahkan jarak vertikal seperti yang diminta poster asli, juga bootstrap devs sekarang melayani untuk itu dalam versi terbaru (4) dalam keadaan beta. Ini sebenarnya jawaban yang benar dan jika Anda google spacing vertikal di bootstrap Anda akan melihat itu tidak dipenuhi sebelumnya. Tolong jangan downvote hal-hal yang belum Anda uji atau googled.
Den

Anda jelas belum membaca pertanyaan. "Saya ingin sedikit (100px) ruang putih kosong di atas dan di bawah tombol tertentu." Sebuah tombol tertentu ... tombol tertentu ...
Matt S

1
Sebelum itu dia berkata: "Misalnya, katakanlah". Itu hanya sebuah contoh, itu bukan masalah spesifik. Jangan mengutip di luar konteks. Contoh yang saya berikan cukup dan semua info yang saya berikan memadai.
Den

-3

Tidak ada yang lebih KERING selain

.btn {
    margin-bottom:5px;
}

13
Saya akan merekomendasikan untuk tidak memodifikasi styling dari kelas cstr bootstrap dasar.
James Palawaga

1
@JamesPalawaga +1. Tetapi jika ini menjadi standar umum di seluruh aplikasi Anda, Anda bisa mengganti gaya bootstrap, menggunakan KURANG dan variabel dan / atau menimpa stylesheet yang dikelola dengan hati-hati.
Jonathan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.