css - Bootstrap 4 不同显示的列表布局

Question

在 Bootstrap 4 中，显示列表的最佳方式是什么？对于中型显示器是内联的，对于较小的设备(例如手机)是 block 状的。我目前有这样的东西，但由于 .list-inline-item

，li 元素仍然是内联的

这是最好的方法吗？纯粹用 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

您是否尝试过 d-lg-inline-block d-md-block 用于 list-inline-item ？