Question

我有产品清单：

<div class="row">
  <div class="col-md-4">Item1</div>
  <div class="col-md-4">Item2</div>
  <div class="col-md-4">Item3</div>
</div>

<div class="row">
  <div class="col-md-4">Item4</div>
  <div class="col-md-4">Item5</div>
  <div class="col-md-4">Item6</div>
</div>

如何更改它以便对于较小的显示器（sm，xs）我每行有2个项目，每行有更大的（lg）4个项目？

Answer 1

您可以根据视口宽度添加更多类：

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

上面为大型视口提供4列输出，3为中型输出，2为小型输出。

由于一行可以包含12列，因此为与所需断点对应的类指定附加值6将为每列提供50％的行宽。

直接引用BootStrap：

超小型设备电话（＆lt; 768px）小型设备平板电脑（≥768px）中型设备台式机（≥992px）大型设备台式机（≥1200px）

超小型设备电话 = col-xs-n
小型设备平板电脑 = col-sm-n
中型设备桌面 = col-md-n
大型设备桌面 = col-lg-n

编辑 - 根据OP的评论，如果你想在较小的视口中并排放置2列，你需要将它们全部添加到同一行：

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

这将在较小的视口提供以下输出

Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6

Answer 2

网格选项：

Extra small  <544px  .col-xs-
Small        ≥544px  .col-sm-
Medium       ≥768px  .col-md-
Large        ≥992px  .col-lg-
Extra large  ≥1200px .col-xl-

来源：Grid Options

添加多个类以指定不同设备的不同规则。

段：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-6">Item1</div>
  <div class="col-md-3 col-sm-6 col-xs-6">Item2</div>
  <div class="col-md-3 col-sm-6 col-xs-6">Item3</div>
  <div class="col-md-3 col-sm-6 col-xs-6">Item4</div>
  <div class="col-md-3 col-sm-6 col-xs-6">Item5</div>
  <div class="col-md-3 col-sm-6 col-xs-6">Item6</div>
</div>

＆＃13;

Answer 3

使用不同的列大小，记住您心中的不同设备。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

为了更好地理解，请访问此链接：Bootstrap responsive for Different Devices

并尝试调整窗口大小，以便在窗口的宽度和高度发生变化时查看网格大小的变化情况。

Answer 4

bootstrap工作作为这种类型的网格Ex。演示链接here Demo

Extra small
<544px => .col-xs-
Small
≥544px => .col-sm-
Medium
≥768px => .col-md-
Large
≥992px => .col-lg-
 Extra large
≥1200px
.col-xl-

＆＃13;

<link href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
  <div class="col-md-4 col-sm-9">Item1</div>
  <div class="col-md-4 col-sm-9">Item2</div>
  <div class="col-md-4 col-sm-9">Item3</div>
  <div class="col-md-4 col-sm-9">Item4</div>
  <div class="col-md-4 col-sm-9">Item5</div>
  <div class="col-md-4 col-sm-9">Item6</div>
</div>
</div>

＆＃13;

如何针对不同的显示大小更改行中的列数

4 个答案: