Как отобразить список в строке с помощью Twitter Bootstrap

Ответ 1

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>

источник: http://v4-alpha.getbootstrap.com/content/typography/#inline

Ответ 2

В соответствии с документацией Bootstrap, касающейся 2.3.2 и 3, класс должен быть определен следующим образом:

Bootstrap 2.3.2

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

Bootstrap 3

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

Ответ 3

В то время как ответ TheBrent верен вообще, он не отвечает на вопрос о том, как это сделать в официальном режиме начальной загрузки. Разметка для начальной загрузки проста:

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

Источник

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

Ответ 4

Чтобы закончить ответ Раймонда

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>

источник: http://v4-alpha.getbootstrap.com/content/typography/#inline

Ответ 5

Я не мог найти ничего конкретного в файле bootstrap.css. Итак, я добавил css в пользовательский файл css.

.inline li {
    display: inline;
}

Ответ 6

I Amazed, list-inline не работал в bootstrap 4, тогда, наконец, я получил его в документации bootstrap 4.

Бутстрап 3 и 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>

Источник: http://v4-alpha.getbootstrap.com/content/typography/#inline

Ответ 7

Это решение работает с использованием Bootstrap v2, однако в TBS3 класс INLINE. Я не понял, что представляет собой эквивалентный класс (если он есть) в TBS3.

У этого джентльмена была довольно хорошая статья о различиях между v2 и v3.

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

EDIT - используйте CSS для таргетинга элементов li для решения вашей проблемы, как показано ниже.

    { display: inline-block; }

В моей ситуации я нацелился на UL вместо LI

    nav ul li { display: inline-block; }

Ответ 8

Inline на самом деле не является встроенным, который нам может потребоваться - например, display: inline

Загрузочная вставка, если я наблюдаю больше горизонтальной ориентации

Чтобы отобразить список в строке с другими элементами, нам нужно

display: inline; added to the UL

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

NB//Добавить в таблицу стилей

Ответ 9

В соответствии с документацией Bootstrap вам нужно добавить класс 'inline' в свой список; например:

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

Однако это не работает, поскольку в файле CSS Bootstrap, как представляется, отсутствует какой-либо CSS, относящийся к классу "inline". Так что добавьте следующие строки в свой CSS файл, чтобы он работал:

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