jquery - Bootstrap 多个 span 6s 不相邻出现

Question

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

仪表板将根据登录者显示不同的统计信息，因此我的代码需要能够允许使用不同数量的“小部件”，因为我喜欢引用它们。这个想法是为每个小部件使用“span6”容器，并让 Bootstrap 自动将它们并排堆叠(每行 2 个)。因为我不知道会显示多少小部件，所以我没有使用 <div class="row">元素。

为了让它更难一点，我还想为每个小部件添加 Accordion 类，允许它们独立折叠

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

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

但是由于某种原因，我的 span6 出现在彼此下方，而不是 2x2 彼此相邻。此外，span6 似乎太小，因为文本周围的标签(例如“0 个 Bug(s) 已关闭并分配给你，干得好!”)右侧没有圆 Angular 。

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

谢谢!

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;
}

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

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

你可以看看它是怎样的works .

更新:

我对你的代码进行了一些修改并实现了 this .

希望对您有所帮助。