Cách hiển thị danh sách nội tuyến bằng Bootstrap của Twitter

Tôi muốn hiển thị một danh sách nội tuyến bằng Bootstrap. Có lớp nào tôi có thể thêm từ Bootstrap để đạt được điều này không?

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>

nguồn: http://v4-alpha.getbootstrap.com/content/typography/#inline

Liên kết được cập nhật https://getbootstrap.com/docs/4.4/content/typography/#inline

Theo tài liệu Bootstrap của 2.3.2 và 3, lớp nên được định nghĩa như sau:

Bootstrap 2.3.2

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

Bootstrap 3

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

Mặc dù câu trả lời của TheBrent nói chung là đúng, nhưng nó không trả lời câu hỏi làm thế nào để làm điều đó theo cách bootstrap chính thức. Đánh dấu cho bootstrap rất đơn giản:

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

Nguồn

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

Để hoàn thành câu trả lời của 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>

nguồn: http://v4-alpha.getbootstrap.com/content/typography/#inline

Tôi không thể tìm thấy bất cứ điều gì cụ thể trong tệp bootstrap.css. Vì vậy, tôi đã thêm css vào một tệp css tùy chỉnh.

.inline li {
    display: inline;
}

Tôi ngạc nhiên, danh sách nội tuyến không hoạt động trong bootstrap 4 và cuối cùng tôi đã nhận được nó trong tài liệu bootstrap 4.

Bootstrap 3 và 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>

Nguồn: http://v4-alpha.getbootstrap.com/content/typography/#inline

Giải pháp này hoạt động bằng Bootstrap v2, tuy nhiên trong TBS3, lớp INLINE. Tôi đã không tìm ra lớp tương đương (nếu có) trong TBS3.

Người đàn ông này đã có một bài viết khá hay về sự khác biệt giữa v2 và v3.

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

EDIT - sử dụng CSS để nhắm mục tiêu các liyếu tố để giải quyết vấn đề của bạn như dưới đây

    { display: inline-block; }

Trong tình huống của tôi, tôi đã nhắm mục tiêu vào UL, thay vì LI

    nav ul li { display: inline-block; }

Nội tuyến không thực sự là nội tuyến mà chúng tôi có thể yêu cầu - tức là hiển thị: nội tuyến

Bootstrap nội tuyến theo như tôi quan sát là nhiều hơn theo hướng ngang

Để hiển thị danh sách nội tuyến với các yếu tố khác thì chúng ta cần

display: inline; added to the UL

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

NB // Thêm vào biểu định kiểu

Theo tài liệu Bootstrap, bạn cần thêm lớp 'nội tuyến' vào danh sách của mình; như thế này:

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

Tuy nhiên, điều này không hoạt động vì dường như có một số CSS bị thiếu trong tệp CSS Bootstrap đề cập đến lớp 'nội tuyến'. Ngoài ra, hãy thêm các dòng sau vào tệp CSS của bạn để làm cho nó hoạt động:

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