Twitter'ın Bootstrap'ini kullanarak bir liste satır içi nasıl görüntülenir

Bootstrap kullanarak bir liste satır içi görüntülemek istiyorum. Bunu başarmak için Bootstrap'ten ekleyebileceğim bir sınıf var mı?

Bootstrap 2.3.2

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

Önyükleme 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>

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

Güncel bağlantı https://getbootstrap.com/docs/4.4/content/typography/#inline

2.3.2 ve 3'ün Bootstrap belgelerine göre, sınıf şu şekilde tanımlanmalıdır:

Bootstrap 2.3.2

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

Önyükleme 3

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

TheBrent'in cevabı genel olarak doğru olsa da, bunun resmi bootstrap yolunda nasıl yapılacağı sorusuna cevap vermez. Bootstrap için işaretleme basittir:

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

Kaynak

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

Raymond'un cevabını tamamlamak için

Bootstrap 2.3.2

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

Önyükleme 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>

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

Bootstrap.css dosyasında belirli bir şey bulamadım. Bu yüzden, css'yi özel bir css dosyasına ekledim.

.inline li {
    display: inline;
}

Hayret, list-inline bootstrap 4'te çalışmadı, sonra nihayet bootstrap 4 belgelerinde aldım.

Bootstrap 3 ve 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>

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

Bu çözüm Bootstrap v2 kullanarak çalışır, ancak TBS3'te INLINE sınıfı. TBS3'te (eğer varsa) eşdeğer sınıfın ne olduğunu anlayamadım.

Bu beyefendinin v2 ve v3 arasındaki farklar hakkında oldukça iyi bir makalesi vardı.

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

EDIT - liaşağıdaki gibi sorununuzu çözmek için öğeleri hedeflemek için CSS kullanın

    { display: inline-block; }

Benim durumumda LI yerine UL'yi hedefliyordum

    nav ul li { display: inline-block; }

Satır içi aslında gerektirdiğimiz satır içi değildir - yani display: satır içi

Gözlemlediğim kadar bootstrap satır içi daha çok yatay bir yönelime sahip

Listeyi diğer öğelerle birlikte görüntülemek için ihtiyacımız var

display: inline; added to the UL

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

NB // Stil sayfasına ekle

Bootstrap belgelerine göre, 'inline' sınıfını listenize eklemeniz gerekir; bunun gibi:

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

Ancak, Bootstrap CSS dosyasında 'inline' sınıfına atıfta bulunan bazı CSS eksik olduğu için bu çalışmaz. Ek olarak, çalışmasını sağlamak için CSS dosyanıza aşağıdaki satırları ekleyin:

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