Макет списка Bootstrap 4 для разных дисплеев

Question

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

Это даже лучший подход? Было бы лучше сделать это чисто с flexbox?

<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>

Answer 1

В Bootstrap 4, как лучше всего отобразить список, для которого встроен средние дисплеи и блоки для небольших устройств, таких как телефоны

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

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

для блока ниже средних видовых экранов и встроенного соединения md, например d-block d-md-inline

Answer 2

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

Answer 3

In Bootstrap 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

Answer 4

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

СКС:

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;
     }
  }
}