Cara menampilkan daftar sebaris menggunakan Bootstrap Twitter

237

Saya ingin menampilkan daftar sebaris menggunakan Bootstrap. Apakah ada kelas yang dapat saya tambahkan dari Bootstrap untuk mencapai ini?

twitter-bootstrap TheBrent
sumber

Jawaban:

578

Bootstrap 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3

<ul class="list-inline">
  <li>...</li>
</ul>

Bootstrap 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

sumber: http://v4-alpha.getbootstrap.com/content/typography/#inline

Tautan yang diperbarui https://getbootstrap.com/docs/4.4/content/typography/#inline

Pablo
sumber
2
Jawaban terbaik karena menghadirkan solusi untuk semua versi yang tersedia! Terima kasih sobat!
mislavcimpersak
Mengapa semakin banyak verbose dari waktu ke waktu? Tidakkah Bootstrap menyadari bahwa mereka sedang berjalan berlawanan arah dengan kesederhanaan?
Pavel Komarov
58

Menurut dokumentasi Bootstrap dari 2.3.2 dan 3, kelas harus didefinisikan seperti ini:

Bootstrap 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3

<ul class="list-inline">
  <li>...</li>
</ul>
Raymond Yip
sumber
41

Meskipun jawaban TheBrent benar secara umum, jawaban itu tidak menjawab pertanyaan tentang bagaimana melakukannya dengan cara bootstrap resmi. Markup untuk bootstrap sederhana:

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Sumber

http://jsfiddle.net/MgcDU/4602/

Coneybeare
sumber
1
@coneybeare karena alasan tertentu tidak berfungsi. Solusi TheBrent bekerja cukup baik :)
Sushant Gupta
1
Mungkin Anda menggunakan versi bootstrap kuno. Bootstrap docs dengan jelas menunjukkan ini adalah markup.
coneybeare
2
Solusi Coneybeares adalah versi khusus bootstrap dan menjawab pertanyaan yang diajukan. Tapi, ini adalah web dan semuanya tidak hitam dan putih seperti yang kita inginkan, jadi solusi apa pun yang menyelamatkan Anda waktu itulah yang akan saya gunakan. Jika salah satu tidak berhasil, coba yang lain dan lanjutkan.
TheBrent
4
solusi @coneybeare hanyalah solusi bootstrap2, itu sebabnya tidak bekerja, tidak lebih, tidak kurang!
cl0udw4lk3r
34

Untuk melengkapi jawaban Raymond

Bootstrap 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3

<ul class="list-inline">
  <li>...</li>
</ul>

Bootstrap 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

sumber: http://v4-alpha.getbootstrap.com/content/typography/#inline

ArnaudR
sumber
4
terlihat, semakin lama.
Anthony Tsang
10
Bootstrap 7 <ul class = "unordered-list-inline-horizontal-flat-oneline">
Anthony Tsang
15

Saya tidak dapat menemukan sesuatu yang spesifik dalam file bootstrap.css. Jadi, saya menambahkan css ke file css khusus.

.inline li {
    display: inline;
}
TheBrent
sumber
9

Saya kagum, list-inline tidak berfungsi di bootstrap 4 lalu akhirnya saya mendapatkannya di dokumentasi bootstrap 4.

Bootstrap 3 dan 4

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Sumber: http://v4-alpha.getbootstrap.com/content/typography/#inline

Sabir Hussain
sumber
1

Solusi ini bekerja menggunakan Bootstrap v2, namun di TBS3 kelas INLINE. Saya belum menemukan apa kelas yang setara (jika ada) di TBS3.

Pria ini memiliki artikel yang cukup bagus tentang perbedaan antara v2 dan v3.

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

EDIT - gunakan CSS untuk menargetkan lielemen untuk menyelesaikan masalah Anda seperti di bawah ini

    { display: inline-block; }

Dalam situasi saya, saya menargetkan UL, bukan LI

    nav ul li { display: inline-block; }
Craig London
sumber
-1

Inline sebenarnya bukan inline yang mungkin kita perlukan - yaitu display: inline

Bootstrap inline sejauh yang saya pengamat lebih merupakan orientasi horizontal

Untuk menampilkan daftar sejajar dengan elemen lain maka kita memang perlu

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

NB // Tambahkan ke stylesheet

Ian Warner
sumber
-1

Menurut dokumentasi Bootstrap, Anda perlu menambahkan kelas 'inline' ke daftar Anda; seperti ini:

<ul class="inline">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

Namun, ini tidak berfungsi karena tampaknya ada beberapa CSS yang hilang dalam file Bootstrap CSS yang merujuk ke kelas 'inline'. Jadi tambahan, tambahkan baris berikut ke file CSS Anda untuk membuatnya berfungsi:

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
Georg
sumber