Cómo mostrar una cuadrícula de 4x4 usando Bootstrap 3 en un iPhone

I don't understand what I'm doing wrong. I want to use divs, but they're not working. Aquí está el violín. If you shrink the result screen, you will see that my divs go vertical.

<a class="btn btn-primary" href="#">Bootstrap 3</a>
<div class="row">
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
</div>
<div class="row">
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
</div>
<div class="row">
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
</div>
<div class="row">
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
    <div class="col-sm-3">3</div>
</div>
<table class="table">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

preguntado el 27 de noviembre de 13 a las 04:11

2 Respuestas

You can fix it by using below code

<div class="row">
<div class="col-sm-3 col-xs-3">3</div>
<div class="col-sm-3 col-xs-3">3</div>
<div class="col-sm-3 col-xs-3">3</div>
<div class="col-sm-3 col-xs-3">3</div>
</div>

Aquí está actualizado violín

respondido 27 nov., 13:08

Solo necesitas reemplazar sm con xs... This will give you the "tiny" non-stacking grid:

<div class="row">
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
</div>
<div class="row">
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
</div>
<div class="row">
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
</div>
<div class="row">
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
</div>

Demostración: http://bootply.com/97005

respondido 27 nov., 13:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.