Question

这是我第一次使用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文件。

bootstrap.min.css

我想在最大屏幕上最多3列，我希望这些框延伸到容器的末端（变宽）。目前它将延伸到盒子都在同一行。到达3列后，我想让每个盒子拉伸，这样它将覆盖容器的整个宽度。

有没有办法控制有多少列？

有没有办法控制盒子相互折叠的顺序（即从3列变为2列或从2列变为1列）？

Answer 1

您正在寻找使用Bootstrap默认类进行媒体查询行为：

<div id="sandbar-monitoring" class="col-lg-4 col-md-6 item col-xs-12">

在大屏幕上，每行将有3个项目
在平板电脑上，每行将有2个项目
在手机上，每行将有1个项目

Bootstrap流体网格

1 个答案: