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

您可以通过添加以下几类来使用all(first <= second for first, second in zip(a, a[1:]))中的引导程序断点： col，其中x是引导程序提供的12网格系统中的给定数字，例如，您希望所有七列都在大屏幕上排成一排，并且在移动屏幕上每行应细分为两排，只需添加col-lg-x，其中col-xs-x代表小型和超小型设备，col-xs-6 col-md-3 col-lg-1代表中型设备，然后添加一个xs类，其中x是从1到12的给定数字。 md代表大屏幕设备。

您只是将其翻译为在lg设备上应连续两个，在xs设备上应连续四个，md设备应为七个列连续

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

Bootstrap 4-网格-最后一列采用全宽

3 个答案: