Question

我刚刚开始学习Bootstrap，我遇到了网格系统。我一直在玩，并注意到网格列始终从左侧开始向右侧移动，将div放在另一个旁边。如何使它们看起来一个在另一个之下？这是一些示例代码：

<body>

<div class="container-fluid">
  <h2>Three Equal Columns</h2>
  <div class="row">
    <div class="col-4 bg-success">.col-1</div>
    <div class="col-4 bg-warning">.col-2</div>
    <div class="col-4 bg-success">.col-3</div>
  </div>
</div>

</body>

这是一个小提琴。 https://jsfiddle.net/txdqjf8b/2/

如何让col-1，col-2和col-3出现在另一个之下，以便稍后如果我有col-4，col-5和{ {1}}，我希望他们这样：

col-6

Answer 1

在bootstrap 4中，可以选择使用order-lg/md/sm/xs-1对您的元素进行排序。

<div class="col-md-4 order-md-1 bg-success">.col-1</div> 
<div class="col-md-4 order-md-4 bg-warning">.col-2</div> 
<div class="col-md-4 order-md-7 bg-success">.col-3</div>
<div class="col-md-4 order-md-2 bg-success">.col-4</div> 
<div class="col-md-4 order-md-5 bg-warning">.col-5</div> 
<div class="col-md-4 order-md-8 bg-success">.col-6</div>
<div class="col-md-4 order-md-3 bg-success">.col-7</div> 
<div class="col-md-4 order-md-6 bg-warning">.col-8</div> 
<div class="col-md-4 order-md-9 bg-success">.col-9</div>

我已经更新了你的小提琴。这是DEMO

您可以更清晰地了解文档https://v4-alpha.getbootstrap.com/utilities/flexbox/#order

上面的代码我已经完成了仅适用于中等大小的屏幕。就像这样，您可以决定大屏幕和小屏幕的订单。假设您想要共同申请，请使用下面的order-1。

<div class="col-4 order-1 bg-success">.col-1</div> 
<div class="col-4 order-4 bg-warning">.col-2</div> 
<div class="col-4 order-7 bg-success">.col-3</div>
<div class="col-4 order-2 bg-success">.col-4</div> 
<div class="col-4 order-5 bg-warning">.col-5</div> 
<div class="col-4 order-8 bg-success">.col-6</div>
<div class="col-4 order-3 bg-success">.col-7</div> 
<div class="col-4 order-6 bg-warning">.col-8</div> 
<div class="col-4 order-9 bg-success">.col-9</div>

以下是DEMO

Answer 2

<div class="row">
 <div class="col-md-4 col-lg-4 col-sm-4">
   <div class="row">
     <div class="col-md-12 bg-success">col-1</div>
   </div>
   <div class="row">
     <div class="col-md-12 bg-success">col-2</div>
   </div>
   <div class="row">
     <div class="col-md-12 bg-success">col-3</div>
   </div>
 </div>
 <div class="col-md-4 col-lg-4 col-sm-4">
    <div class="row">
     <div class="col-md-12 bg-success">col-4</div>
    </div>
    <div class="row">
     <div class="col-md-12 bg-success">col-5</div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-success">col-6</div>
    </div>
 </div>
 <div class="col-md-4 col-lg-4 col-sm-4">
    <div class="row">
      <div class="col-md-12 bg-success">col-7</div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-success">col-8</div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-success">col-9</div>
    </div>
 </div>
</div>

Answer 3

当您可以定义具有多个列的元素时，CSS3中有一个功能。但是，我并不认为所有浏览器都支持此功能。

或者它可能与bootstrap css发生冲突。

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

＆＃13;

.row {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.col{
	width: 200px;
    height: 50px;
    border: 1px solid black;
}

＆＃13;

<div class="row">
	<div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
    <div class="col">col 4</div>
    <div class="col">col 5</div>
    <div class="col">col 6</div>
</div>

＆＃13;

https://www.w3.org/TR/css-multicol-1/

https://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

Answer 4

这对你有用。

<div class="row">
  <div class="col-4 bg-success">.col-1</div>
</div>
<div class="row">
  <div class="col-4 bg-warning">.col-2</div>
</div>
<div class="row">
  <div class="col-4 bg-success">.col-3</div>
</div>

Answer 5

对于Google员工：如果要在没有Bootstrap的情况下执行此操作，或者使用的是Bootstrap 3，则可以简单地使用display：grid，并使用grid-auto-flow：列。

我创建了一个示例，您可以在此处查看：

from scipy import signal
import numpy as np
from cv2 import cv2
from PIL import Image

image = cv2.imread('MinesweeperTest.png',0)
template = cv2.imread('Mine2.png',0)

corr = signal.correlate2d(image,template,mode="same")

Image.fromarray(corr).save("correlation.png")

codepen.io/mauricio-paz/pen/RwNPqyM

如何将引导网格列一个堆叠在另一个之下而不是另一个之间？

5 个答案: