使用bootstrap创建此布局

Question

我可以使用列稍微近似它，但行不对齐，它们以对角线方式折叠。所以我想我会重新开始，并在制作响应版本时寻求任何帮助。当屏幕缩小时，每个单元应该叠在一起。

以下是我要创建的内容：

这是我的出发点。

HTML：

<div class="unit">
  <div id="blue" class="square"></div>
  <div class="text">Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text       Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum
  </div>
</div>

<div class="unit">
  <div id="red" class="square"></div>
  <div class="text">
  Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text     Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum
  </div>
</div>

<div class="unit">
  <div id="yellow" class="square"></div>
  <div class="text">
Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum     Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum </div>
</div>

<div class="unit">
  <div id="green" class="square"></div>
  <div class="text">Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text     Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum     Green Text Lorem Ipsum</div>
</div>

CSS（无布局）

.square{
  height: 50px;
  width: 50px;
}

#blue{
  background-color: blue;
}

#red{
  background-color: red;
}

#yellow{
  background-color: yellow;
}

#green{
  background-color: green;
}

Answer 1

使用Bootstrap，您将依赖于Grid系统。在下面的示例中，我使用.container-fluid和.col-xs-6创建了一个两列格式的网格，与屏幕大小无关。

＆＃13;

＆＃13;

.unit {
    text-transform: uppercase;
}

.square {
  float: left;
  width: 150px;
  height: 150px;
  background: #ccc;
  margin: 0 15px 5px 0;
 }

.red {
  background: #ff0000;
}

.yellow {
  background: #ffff00;
}

.green {
  background: #00ff00;
}

.blue {
  background: #0000ff;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
	<div class="row">
	
		<div class="col-xs-6">
			<div class="unit">
				<div class="square blue"></div>
				<div class="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
		</div>

		<div class="col-xs-6">
			<div class="unit">
				<div class="square red"></div>
				<div class="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
		</div>

		<div class="col-xs-6">
			<div class="unit">
				<div class="square yellow"></div>
				<div class="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
		</div>
		
		<div class="col-xs-6">
			<div class="unit">
				<div class="square green"></div>
				<div class="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
		</div>				
		
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用bootstrap网格系统

cmd.Parameters.AddWithValue("@accId", id);

并为其他行重复该行   ......