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

212

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

Ваш Ответ

9   ответов
56

класс должен быть определен следующим образом:

Bootstrap 2.3.2

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

Bootstrap 3

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

который нам может понадобиться, т. Е. Display: inline

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

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

display: inline; added to the UL

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

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

40

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

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

Источник

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded TheBrent
Error: User Rate Limit Exceeded
8

встроенный список не работал в bootstrap 4, а потом я получил его в документации по начальной загрузке 4.

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

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

-1

вам нужно добавить класс «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;
}
32

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
509

Bootstrap 2.3.2

  <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

Error: User Rate Limit Exceeded
1

однако в 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; }
15

я добавил CSS в пользовательский файл CSS.

.inli,ne li {
    display: inline;
}

Похожие вопросы