Макет списка Bootstrap 4 для различного отображения

В Bootstrap 4 как лучше всего отобразить список, встроенный для средних дисплеев и заблокированный для небольших устройств, таких как телефоны. В настоящее время у меня есть что-то вроде этого, но элементы li все еще встроены из-за .list-inline-item

Это даже лучший подход? Было бы лучше сделать это чисто с помощью флексбокса?

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<footer class = "fluid-container">
			<div class = "row text-sm-center">
				<ul class = "col-md d-md-list-inline d-sm-list-block align-self-center text-md-left" style = "background: pink;">
					<li class = "list-inline-item">
						<a href = "">About</a>
					</li>
					<li class = "list-inline-item">
						<a href = "">Contact</a>
					</li>
					<li class = "list-inline-item">
						<a href = "">Charity</a>
					</li>
					<li class = "list-inline-item">
						<a href = "">Terms &amp; conditions</a>
					</li>
					<li class = "list-inline-item">
						<a href = "">Site map</a>
					</li>
				</ul>
				<div class = "col-md text-md-right" style = "background: green;">
					<p class = "m-0">
						&copy; 2011 - 2018 My website, all rights reserved
					</p>
					<p>
						Some other text
					</p>
				</div>
			</div>
		</footer>
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
1 367
4

Ответы 4

Я использую флекс, это быстро, легко и надежно. при использовании flex: 0; убедитесь, что предоставили flex-base: auto; специально для ie11:

scss:

ul.class-name
{
  display:flex;
  flex-wrap:wrap;

  li.class-name
  {
     /* fallback for ie11 */
     flex-basis: auto;

     /* hide from ie11 with @supports because it doesn't understand this */
     @supports(display: grid)
     {
       flex:0;
     }
  }
}

Вы пробовали d-lg-inline-block d-md-block для list-inline-item?

В Бутстрап 4 способ простейший (без лишнего CSS) заключается в использовании flexbox для установки направления в ответ. Просто добавьте d-flex flex-md-row flex-column в строку ...

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "row text-sm-center">
       <ul class = "col-md d-flex flex-md-row flex-column align-self-center text-md-left" style = "background: pink;">
                    <li class = "list-inline-item">
                        <a href = "">About</a>
                    </li>
                    <li class = "list-inline-item">
                        <a href = "">Contact</a>
                    </li>
                    <li class = "list-inline-item">
                        <a href = "">Charity</a>
                    </li>
                    <li class = "list-inline-item">
                        <a href = "">Terms &amp; conditions</a>
                    </li>
                    <li class = "list-inline-item">
                        <a href = "">Site map</a>
                    </li>
       </ul>
       <div class = "col-md text-md-right" style = "background: green;">
                    <p class = "m-0">
                        &copy; 2011 - 2018 My website, all rights reserved
                    </p>
                    <p>
                        Some other text
                    </p>
        </div>
</div>

Демо: https://www.codeply.com/go/KWzGkQEklA

Есть ли смысл в использовании системы сеток с включением flexbox в bootstrap 4? Некоторое время я не использовал бутстрап и просто собираюсь использовать его снова.

OAFCROB 31.10.2018 19:48

Конечно, столбцы автоматической компоновки по-прежнему считаются частью сетки". Вы также можете использовать классическую сетку для установки ширины.

Zim 31.10.2018 19:52

In Bootstrap 4 what's the best way to display a list that's inline for medium displays and block for smaller devices such as phones

Используйте классы d-* - документация

встроенный для среднего и более высокого уровня использования d-md-inline

для блока ниже средних окон просмотра amd inline из md используйте комбинацию, например d-block d-md-inline

Другие вопросы по теме