Question

我正在摆弄引导程序，为我们的错误跟踪网络应用程序制作一个漂亮的仪表板，但无法让它显示我想要的方式......

仪表板将根据登录的人显示不同的统计信息，因此我的代码需要能够阻止使用不同数量的“小部件”，因为我想引用它们。我们的想法是为每个小部件使用'span6'容器，并自动将引导程序并排堆叠（每行2个）。由于我不知道将显示多少小部件，因此我没有使用<div class="row">元素。

为了让它更难一点，我想将手风琴类添加到每个小部件中，允许它们独立折叠

我首先将所有内容放在<div class="span12">元素中，然后在下面添加span6元素。

我没有在这里写下所有内容，而是在bootply上创建了一个小例子：Bootply link

然而由于某种原因，我的span6出现在彼此之下，而不是彼此相邻的2x2。另外span6似乎太小了，因为文本周围的标签（例如'0 Bug（s）关闭并分配给你，干得好！'）右边没有圆角。

如果你能查看这些代码并让我知道我走错了路，我将非常感激。

谢谢！

Answer 1

如果你检查css，你可以看到元素span6已经margin-left: 30px。

@media (min-width: 1200px)
.span6 {
   width: 570px;
}
@media (min-width: 1200px)
[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px;
}

您无法将所有内容都放在页面中您可以做的是减少span6内accordion的边距。

.accordion-inner > .span6
{
 margin-left: 0 !important;
}

你可以看到works。

<强>更新

我对您的代码进行了一些格式化并取得了this。

希望它有所帮助。

Answer 2

我只是升级到Bootstrap 3.0.0，它完美地处理了这个问题。我定义了一个主要的col-lg-12（bootstrap v2中的'span12'的新名称）并在其中放置了几个col-lg-6，它们完美地位于下一个并且位于彼此之上。

Bootstrap几个跨度6s不会彼此相邻

2 个答案: