我有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>
这是对的吗？
答案 0 :(得分：0)
首先，您需要将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 -->
接下来应该链接到bootstrap：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
看一下片段：
<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？