Question

我有十二个社交图标。

我想成为：

在桌面模式下排成12行（排1行）

平板电脑模式下每行

3（4行）

移动尺寸的每一行

1（制作12行）

我有这个标记：

<div class='container'>
   <div class='row'>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

   </div>
</div>

但它很快会变成十二行（在平板电脑模式下）。

由于

Answer 1

使用

<div class="col-xs-12 col-sm-4 col-md-1"></div>

每个div

Answer 2

这样的东西？

<div class='container'>
    <div class='row'>
        <div class='col-sm-12 col-md-4 col-lg-1'>1</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>2</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>3</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>4</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>5</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>6</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>7</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>8</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>9</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>10</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>11</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>12</div>
    </div>
</div>

http://jsfiddle.net/leighking2/bkxj7772/（调整预览宽度以查看更改）

Answer 3

你可以这样做..

<div class="container">
   <div class="row">
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
   </div>
</div>

http://www.bootply.com/oSLoSE9saE

请注意，您不需要col-xs-12，因为Bootstrap默认会在最小的设备（手机）上堆叠

Answer 4

<div class='container'>
   <div class='row'>

<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>

<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>

<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>

   </div>
</div>

我需要使用bootstrap的响应式列

4 个答案: