Bootstrap 4 - 网格 - 最后一列采用全宽[重复]

Question

我有一个像这样的基本 Bootstrap 4 网格：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
		<div class="row">
			<div class="col">
				some content
			</div>
			<div class="col">
				some content
			</div>
			<div class="col">
				some content
			</div>
			<div class="col">
				some content
			</div>
			<div class="col">
				some content
			</div>
			<div class="col">
				some content
			</div>
			<div class="col">
				some content
			</div>
		</div>
	</div>

列正确地拉伸并填充了行宽，但在某些视口上，最后一列被发送到下一行（因为它不适合）并且以某种方式拉伸太多（并占据了整个行的宽度）。

如何防止这种情况发生？

Answer 1

在行上使用flex-nowrap...

<div class="container">
    <div class="row flex-nowrap">
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
        <div class="col">
            some content
        </div>
    </div>
</div>

https://www.codeply.com/go/w8H4wPL8Vj

Answer 2

可以使用引导类 col-xs-* 设置行内的列的样式，以便您的所有列都适合同一行，而不是进入下一行。

例如，

<div class="container">
  <div class="row">
     <div class="col-xs-4">
     </div>
     <div class="col-xs-4">
     </div>
     <div class="col-xs-4">
     </div>
  </div>
</div>

Answer 3

您可以通过添加额外的几个类来使用col 中的引导断点，例如： col-lg-x 其中 x 是 bootstrap 提供的 12 网格系统中的给定数字，例如，您希望所有七列在大屏幕上的一行中，并且它应该在移动屏幕上的每行中分解为两列，您只需添加col-xs-x 类，其中 x 是从 1 到 12 的给定数字，通过给定它 col-xs-6 col-md-3 col-lg-1 其中xs 代表小型和超小型设备，md 代表中型设备，lg 代表大屏幕设备。

您只是简单地翻译，在xs 设备上应该是一行两个，在md 设备上应该是一行四个，lg 设备应该是一行七列。

链接了解更多http://getbootstrap.com/docs/4.1/layout/grid/