这是我第一次使用 bootstrap，我有一些关于如何操作网格使其在各种尺寸的屏幕上表现良好的概念性问题。
我开发了这个可重现的示例来帮助描述我的问题:
HTML:
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="static/lib/bootstrap_3.0.0/css/bootstrap.min.css" />
<title>Untitled Document</title>
</head>
<body>
<div class="container-fluid">
<div id="page-content" class="application-body-home">
<h2 id="homepage-title">Campsites</h2>
<div id="content" class="row">
<input type="hidden" id="geojson_sites" name="geojson_sites_url" value="/sandbar/surveys/sites_geo_json/" readonly>
<div id="sandbar-intro" class="col-md-4 item">
<div class="sectionWideTitle">Introduction</div>
<div id='intro-text' class="well full">
</div> <!-- end of intro-text section-->
</div> <!-- end of sandbar intro section-->
<div id="sandbar-monitoring" class="col-md-4 item">
<div class="sectionWideTitle">Campsite Monitoring</div>
<div id="sites-map-div" class="well full">
<div id="monitoring-text">
</div>
</div> <!-- end of sites-map-div section-->
</div> <!-- end of sandbar monitoring section-->
<div id="sandbar_data" class="col-md-4 item">
<div class="sectionWideTitle">Campsite Locations and Historical Photos</div>
<div id="sandbar_data_links" class="well full">
</div> <!--end of sandbar data links section-->
</div> <!-- End of sandbar data section-->
<div class="col-md-4 item">
<div class="sectionWideTitle">For Additional Information</div>
<div class="well half">
<span>For additional information, please contact</span>
</div> <!-- end of well half div-->
<div class="sectionWideTitle">Terms of Use</div>
<div class="well half">
</div> <!--End of well half div-->
</div> <!-- End of col-md-4 item additional info section-->
<div class="col-md-4 item">
<div class="sectionWideTitle">References</div>
<div class="well full">
<div class="media">
<div class="media-body">
</div> <!--end of calss media body tag-->
</div>
</div>
</div> <!-- End of References Section-->
<div class="col-md-4 item">
<div class="sectionWideTitle">Cooperating Agencies and Academic Institutions</div>
<div class="well half">
<div class="media">
</div>
<div class="media">
</div>
</div>
</div> <!-- End of cooperating agencies section-->
</div> <!-- end of id content class row section -->
</div> <!-- end of page content tag -->
</div> <!--end of contaner fluid section-->
</body>
</html>
` 标签指的是本文所附的 bootstrap.min.css 文件。
我希望在最大的屏幕上最多显示 3 列，并且我希望这些框延伸到容器的末端(变宽)。目前它会一直延伸直到盒子都在同一行。达到 3 列后，我想让每个盒子拉伸(stretch)，以便覆盖容器的整个宽度。
有没有办法控制有多少列？
有没有办法控制盒子相互折叠的顺序(即从 3 列变为两列或从 2 列变为一列)？
最佳答案
为媒体查询行为使用 Bootstrap 默认类是您要寻找的:
<div id="sandbar-monitoring" class="col-lg-4 col-md-6 item col-xs-12">
- 在大屏幕上，每行有 3 个元素
- 在平板电脑上，每行有 2 个元素
- 在手机上，每行有 1 个元素
关于html - Bootstrap 流体网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27025439/