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


237

Я хочу отобразить список встроенным с помощью Bootstrap. Есть ли класс, который я могу добавить из Bootstrap для достижения этой цели?

Ответы:


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>

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

Обновленная ссылка https://getbootstrap.com/docs/4.4/content/typography/#inline


2
Лучший ответ из-за представления решений для всех доступных версий! Спасибо друг!
mislavcimpersak

Почему со временем оно становится более многословным? Разве Bootstrap не понимает, что они движутся в противоположном направлении простоты?
Павел Комаров

58

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

Bootstrap 2.3.2

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

Bootstrap 3

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

41

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

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

Источник

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


1
@coneybeare по какой-то причине не работает. Решение The Brent сработало достаточно хорошо :)
Sushant Gupta

1
Может быть, вы используете древнюю версию начальной загрузки. Документы по начальной загрузке ясно показывают, что это разметка.
coneybeare

2
Решение Coneybeares - это специальная версия для начальной загрузки, которая отвечает на заданный вопрос. Но Интернет и все не так черно-белые, как хотелось бы, поэтому любое решение, которое сэкономит вам время, - это то, которое я бы использовал. Если один не работает, попробуйте другой и двигаться дальше.
TheBrent

4
Решение @coneybeare - это просто решение bootstrap2, поэтому оно не работает, ни больше, ни меньше!
cl0udw4lk3r

34

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

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


4
выглядит, это становится длиннее и дольше.
Энтони Цанг

10
Bootstrap 7 <ul class = "unordered-list-inline-горизонтальный-плоский-oneline">
Энтони Цанг

15

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

.inline li {
    display: inline;
}


1

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

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

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

РЕДАКТИРОВАТЬ - используйте CSS для нацеливания liэлементов, чтобы решить вашу проблему, как показано ниже

    { display: inline-block; }

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

    nav ul li { display: inline-block; }

-1

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

Начальная загрузка, насколько я наблюдатель, имеет более горизонтальную ориентацию

Для отображения списка, встроенного с другими элементами, нам нужно

display: inline; added to the UL

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

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


-1

Согласно документации 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;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.