Question

在Bootstrap 4中，什么是显示列表的最佳方法，该列表对于中型显示器是内联的，对于较小的设备（如电话）则是阻止的。我目前有这样的东西，但是由于.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

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

我使用flex，它快速，简单且可靠。使用flex：0时确保提供flex-basis：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;
     }
  }
}

Answer 3

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

Answer 4

在Bootstrap 4中，显示内联列表的最佳方法是什么中等尺寸的显示器，并阻挡手机等较小的设备

使用d-*类-documentation

针对中型及以上用途的嵌入式d-md-inline

对于中等视口以下的块和md使用d-block d-md-inline之类的md内联

Bootstrap 4列表布局，用于不同的显示

4 个答案: