Question

我使用Bootstrap在我的一个页面上有以下3列布局：

<div class="row">

    <div id="1" class="col-md-3">

        <div id="a">
        .. How can I make this 33% wide when the overal browser width is reduced?
        </div>

        <div id="b">
        .. How can I make this 33% wide and float next to the above?
        </div>

        <div id="c">
         .. How can I make this 33% wide and float next to the above?
       </div>


    </div>

    <div class="col-md-6">
    </div> 


    <div class="col-md-3">
    </div>

    </div>

</div>

当浏览器宽度减小时，div＃1立即成为我期望的唯一视图列。但是其中的3个div（a，b，c）仍然堆叠在另一个上面。

我怎样才能使＃1中的3列各自以33％的宽度或4列（在12的网格中）相邻，以最大化屏幕上的视图？

Bootstrap可以处理吗？

解决方案 - 以下面的例子为例，稍加修改。这里的关键是为更大的浏览器大小保留嵌套的div：

<div class="row">
    <div id="1" class="col-md-3">
        <div class="row">
            <div id="a" class="col-md-12 col-sm-4 col-xs-6"">
            .. How can I make this 33% wide when the overal browser width is reduced?
            </div>

            <div id="b" class="col-md-12 col-sm-4 col-xs-6"">
            .. How can I make this 33% wide and float next to the above?
            </div>

            <div id="c" class="col-md-12 col-sm-4 col-xs-6"">
             .. How can I make this 33% wide and float next to the above?
           </div>
       </div>
    </div>
    <div class="col-md-6">
    </div> 
    <div class="col-md-3">
    </div>
</div>

Answer 1

只需在row div中包含3个div id a，b和c 。然后在您的3个div ID a，b和c 中添加col-sm-4课程。请参阅以下代码：

<div class="row">
    <div id="1" class="col-md-3">
        <div class="row">
            <div id="a" class="col-sm-4">
            .. How can I make this 33% wide when the overal browser width is reduced?
            </div>

            <div id="b" class="col-sm-4">
            .. How can I make this 33% wide and float next to the above?
            </div>

            <div id="c" class="col-sm-4">
             .. How can I make this 33% wide and float next to the above?
           </div>
       </div>
    </div>
    <div class="col-md-6">
    </div> 
    <div class="col-md-3">
    </div>
</div>

希望这有帮助！

如何在Bootstrap中使用一列来处理3个浮点数？

1 个答案: