Question

我对bootstrap很新，并且因为以下问题一直在打我的脑袋。每当我使用下面的代码时，列之间的填充就会丢失。

php artisan make:auth

但每当我在列中移动类col时，代码就会按预期运行。

<body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4 col"></div>
                <div class="col-sm-4 col"></div>
                <div class="col-sm-4 col"></div>
            </div>
        </div>
    </body><!--end body-->

以下是我正在使用的CSS类

<body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <div class="col"></div>
                </div>
                <div class="col-sm-4">
                    <div class="col"></div>
                </div>
                <div class="col-sm-4">
                    <div class="col"></div>
                </div>
            </div>
        </div>
    </body><!--end body-->

Answer 1

当您使用第二个版本时，您将获得由您添加的div创建的边距，如果你在.col css类中添加一个余量，你应该看到差异。 You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue

Answer 2

填充不会丢失。在Bootstrap中，col-sm-*有15px填充。请记住，背景颜色填充整个单元格的宽度，包括填充。

你将bg颜色放在带有填充的列上，而在另一种情况下，它是在没有填充的内部列上。

在col-sm-4上放置背景颜色和边框，仅。你会看到差异。填充就在那里，两种情况都是一样的......

http://www.codeply.com/go/lf2V9vlIsr

Answer 3

Bootstrap不会在列之间添加空间，它会在每列中添加空间。因此，如果您在每列中放入另一个div，它将提供您想要的空间。

我看待它的方式是列只作为实际内容的容器，它们在其中。

我觉得你应该做的事情，https://jsfiddle.net/bqadptzL/

CSS：

.col { /* just to demonstrate */ background-color: red; } .box { background-color:gray; min-height: 500px; }

HTML：

<body> <div class="container-fluid"> <div class="row"> <div class="col-sm-4 col"> <div class="box"> Content </div> </div> <div class="col-sm-4 col"> <div class="box"> Content </div> </div> <div class="col-sm-4 col"> <div class="box"> Content </div> </div> </div> </div> </body>

如果查看网格系统示例，您会发现列之间没有空格，只有在它们内部。 http://getbootstrap.com/css/#grid

希望有所帮助。

旁注：您不应将列放在列中，只应将列放在行中。但是您可以将行放在列中。因此，您可以替换行 - 列 - 行 - 列，而不是行 - 列 - 列。这就是Bootstrap系统的工作方式。

为什么引导列之间的填充会丢失

3 个答案: