Bootstrap :Grid not working in mobile view

Question

The following is my grid structure for a site using bootstrap 3. It looks good in the desktop version but when I resize my window it does not go to mobile/tab view. Whats wrong here? On desktop I want them to take 1/6 of the row, and on mobile, 1/3.

<div class="row" id="features">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
</div><!--row-->

Answer 1

请检查您的html头部是否包含meta标签

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

What is your goal?

In your code you design your structure same to your desktop structure.

Change the div classes in your inner container to something like this:

<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">

The number after the classes indicates the width inside the grid. The prefix col-lg , col-md , col-sm , col-xs indicates the different screen sizes (desktop, tablet, mobile) More information you can find in the bootstraps grid section: http://getbootstrap.com/css/#grid

Answer 3

I didn't see any container, so I'm guessing you had none. The grid can malfunction if the this hierarchy is not respected: container => row => col-??-## => content. Also, if the panel odd class is for CSS, why don't you try pseudo-classes and to make it a little more compact, LESS for the col definitions.

Also, if you really want to experiment with mobile/tablet view, the Google Chrome Inspector is awesome for that and more accurate that just resizing the window.

This code works if you want it to look the same on any device, if you want them to take more space, consider changing from col-??-2 to col-??-4 , or for less space to: col-??-1 .

<div class="container"> <!-- Or container-fluid, depending on your needs -->   
    <div class="row" id="features">
         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->
         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->
             <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                 <div class="panel odd">
                     <img src="images/treatment.png" alt="Treatments">
                     <span>Treatments</span>
             </div>
         </div> <!--panel-->

         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->

         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->
    </div><!--row-->
</div>