Макет списка 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>
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

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