How to change number of columns in a row for different display sizes

问题

I have list of products:

<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>

How can I change it so for smaller displays (sm,xs) I'll have 2 items per row, and for larger (lg) 4 item per row ?

回答1:

You can simply add more classes according to the viewport width:

<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>

The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.

Since a row can be comprised of 12 columns, assigning the value 6 appended to the class that corresponds to the breakpoint you want will give each column 50% of the row width.

To quote BootStrap directly:

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)

Extra small devices Phones = col-xs-n
Small devices Tablets = col-sm-n
Medium devices Desktops = col-md-n
Large devices Desktops = col-lg-n

EDIT - as per OP's comment if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:

<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>

This will give you the following output at smaller viewports

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

回答2:

Use Different column sizes by keeping in mind of different devices in your mind.

<!-- 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>

For better understanding head over to this link : Bootstrap responsive for Different Devices

and try resizing the window to see how the grid size changes when the width and height of the window changes.

回答3:

bootstrap work as this type of grid Ex. Demo link here Demo

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

<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>

回答4:

Grid options:

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

Source:Grid Options

Add multiple classes to specify different rules for different devices.

Snippet:

<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>

来源：https://stackoverflow.com/questions/37723975/how-to-change-number-of-columns-in-a-row-for-different-display-sizes

标签

twitter-bootstrap

twitter-bootstrap-3