如何使引导程序跨越未使用的列？

Question

我创建了一行Bootstrap，只需要10列。但是我想使用未使用的2列的剩余空间。

以下是它现在的样子：

所以我只是希望它使用额外的空格向左，以在这些元素之间添加空间。

这是我的代码：

<div class="form-group">
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
</div>

从代码中我看到我只使用了10列，我需要利用额外的空间。

Answer 1

这个怎么样？将此添加到您的CSS

.text-left
{
     margin-left:2.1%;
     margin-right:1.05%;
     border: 1px solid black;/*if necessary*/
}

Answer 2

据我所知，你不能这样做。您必须解决并尝试创建自定义CSS类。

表单示例除以100/5 = 20％并将自定义类添加到您的css中，如

col-md-2-custom{
    width: 20% !important;
}

默认情况下，引导程序使用12列。如果您的整个网站使用10列，您可以自定义http://getbootstrap.com/customize/的引导程序并更改@grid-columns

的值

Answer 3

您可以在.form-group内的div上设置边距。我测试了它，15px会做。

.form-group .col-md-2 {
   margin: 15px;
}

Answer 4

<div class="form-group">
   <div class="col-md-2 col-md-offset-1 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
   <div class="col-md-2 text-left">Unknown</div>
</div>

使用偏移会将您的内容推向视觉中心。

为了创建填充，您可以做的另一件事是将列嵌套在其他列中。这不会打破网格。

This codepen gives a good example使用图像的缩略图来了解嵌套列如何允许您创建填充。