3

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

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

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

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

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

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

如果您能查看这段代码并让我知道我哪里出错了，我将不胜感激。

谢谢！

4

2 回答 2

2

如果您检查 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;
}

你可以看到它是如何工作的。

更新：

我对您的代码做了一些改动并实现了这一点。

希望能帮助到你。

于 2013-08-23T10:35:38.840 回答
0

我刚刚升级到 Bootstrap 3.0.0，它可以完美地处理这个问题。我定义了一个主要的 col-lg-12（bootstrap v2 中的“span12”的新名称）并在其中放置了几个 col-lg-6，它们完美地放置在彼此的旁边。

于 2013-09-19T11:12:46.897 回答