【问题标题】：I want to know about column in bootstrap我想了解引导程序中的列
【发布时间】：2017-01-17 19:45:59
【问题描述】：
我有 10 个图像文件，我想将它们与 Bootstrap 网格系统对齐。如何编写 HTML 以在桌面上显示 4 张图像，在移动设备上显示 2 张图像？
<div class="container">
<h2><a id="gallery">head</a></h2>
<div class="box">
<div class="row">
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
</div>
</div>
</div>
是这样吗？
【问题讨论】：
标签：
html
css
twitter-bootstrap
【解决方案1】：
首先您需要将 bootstrap.css 链接到您的项目。
每个使用 bootstrap 的项目都应该从以下几行开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
接下来应该链接到引导程序：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
看sn-p：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2><a id="gallery">head</a></h2>
<div class="box">
<div class="row">
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
<div class="col-xs-6 col-md-3"><img src="..."></div>
</div>
</div>
</div>
box 是什么？