html - Bootstrap 内容显示不正确,是否了解我做错了什么?

标签 html css twitter-bootstrap

我一直在尝试让 .list-group 和 .list-group-item 在我的 Minecraft 管理面板上的 .panel 中创建玩家列表,但是面板之间似乎总是有一些神秘的填充以及 Bootstrap 网站上不存在的 .list-group。

我实际上是在大约一个小时前下载了我的 Bootstrap 文件,所以它们绝对是最新版本,并且文档自那以后没有改变。

这是我在 Bootstrap 网站上看到的内容: http://getbootstrap.com/components/#panels-list-group enter image description here

这是他们提供的完全相同的代码,但呈现在我的网站上:(我还使用查看源代码来验证他们在呈现页面上显示的实际格式化代码中没有犯错误) enter image description here

任何人都可以给出任何关于为什么会出错的见解吗?所有代码都在 bootstrap 网站上,但为了便于使用,我将在此处提供整个页面:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/bootstrap-glyphicons.css" rel="stylesheet"/>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="panel">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <p>...</p>

    <!-- List group -->
    <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    </div>
</body>
</html>

如果我遗漏了什么,请发表评论,我会尽快修改我的问题。我知道这可能是一些非常愚蠢的错误,但它让我受骗了,我已经搞砸了将近 3/4 小时,希望也许其他人遇到了这个问题并弄清楚发生了什么以及为什么这段代码在Bootstrap 文档网站。

最佳答案

我认为这可能是一个错误。我也是前几天才知道的。这是我的解决方法。

.panel .list-group {
  margin: -16px -15px -10px;
}

.panel .list-group .list-group-item {
  border-width: 1px 0;
}

.panel .list-group .list-group-item:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.panel .list-group .list-group-item:last-child {
  border-bottom: 0;
}

关于html - Bootstrap 内容显示不正确,是否了解我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18129831/

相关文章:

PHP 在 proc_open() 之后没有立即返回

javascript - 在父元素中查找变量作为选择器

html - 为什么我的 bootstrap 列重叠?

javascript - 远程启动克隆模态

jquery - 当 jquery 事件附加到提交按钮时表单不发布

javascript - 无 JavaScript 浏览器的 Noscript 表单后备

css - 从数据以编程方式创建响应式 Bootstrap 表单

javascript - 触发已在插件上注册的 javascript 事件处理程序

html - 在移动 View 电子邮件 html 中打破特定字母的单词

html - 图像居中有问题?