Question

我不明白我做错了什么。我想使用div，但它们没有用。 Here's the fiddle。如果缩小结果屏幕，您将看到我的div垂直。

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

Answer 1

您可以使用以下代码修复它

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

此处已更新fiddle

Answer 2

您只需将sm替换为xs ...这将为您提供“微小的”非堆叠网格：

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

演示：http://bootply.com/97005

如何在iPhone上使用bootstrap 3显示4x4网格

2 个答案: