Bootstrap Grid（大3列，中2列，小1列）

Question

我是 Bootstrap 的新手，所以如果问一个愚蠢的问题，请原谅。我想创建一个在大型设备上具有 3 列、在中型设备上具有 2 列、在小型设备上具有 1 列的创建。

我使用以下代码来实现这一点

        <div class="row" > 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="clearfix visible-md">
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
        </div>

        <div class="row" > 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="clearfix visible-md">
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
        </div>

它适用于大型和小型布局。但是在中等布局上，每个替代行中都会有一个空白区域。 （我不想要）。我希望它完全流畅。

Answer 1

你正在使用 col-md-6 三个

<div>

这导致它溢出，因为列大小在引导程序中固定为 12。您还在四个之后添加了额外的行

<div>.

由于其中一个是空的，因此您将获得中等大小的空白空间。为了克服这个问题，您可以在一个下定义所有代码

<div class= "row">

并删除空的

<div class="clearfix visible-md">
</div> 

像这样：-

    <div class="row" > 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 

        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 

        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 

    </div>
</div>

也可以看bootstrap的文档Understanding grids

Answer 2

每列大小的最大值为每行 12。所以：

<div class="col-lg-4 col-md-6 col-sm-12"></div>
<div class="col-lg-4 col-md-6 hidden-sm"></div>
<div class="col-lg-4 hidden-md hidden-sm"></div>

每行：

• 大 12/4 = 3
• 中 12/6 = 2
• 小 12/12 = 1

将在大上呈现 3 列，在中呈现 2 列，在小上呈现 1 列（在一行中）。这可能对您特别遇到的设计问题没有帮助，但这就是逻辑在引导程序中处理媒体查询的方式。

hidden-*

当视口符合条件时将隐藏该特定列。还有，

col-md-offset-*

对于在不添加空 div 的情况下轻推你的 cols 很有用。

A fiddle showing this in action (including xs size)

Docs

HTH

Answer 3

只要使用这个系统...

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