CSS 引导面板不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46429727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap panel not working
提问by MStimp
I'm using bootstrap with angular, but the panels aren't working correctly. I can confirm the files are in the right spots.filesThis is what it looks like: resultI can use btn and btn-primary, but not panel. What could be causing this issue?
我正在使用带角度的引导程序，但面板无法正常工作。我可以确认文件在正确的位置。files这是它的样子：result我可以使用 btn 和 btn-primary，但不能使用面板。什么可能导致这个问题？
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<button class="btn btn-success">test</button>
</body>
</html>
回答by Adaleni
If you are using Bootstrap 4 read this:
如果您使用的是 Bootstrap 4，请阅读以下内容：
Panels, thumbnails, and wells
Dropped entirely for the new card component.
Panels
.panel to .card, now built with flexbox.
.panel-default removed and no replacement.
.panel-group removed and no replacement. .card-group is not a replacement, it is different.
.panel-heading to .card-header
.panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
.panel-body to .card-body
.panel-footer to .card-footer
.panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
.panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
.panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
.panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
.panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)
https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells
https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells
回答by Ashley Brown
For Bootstrap 4, panelshave been droppedin favour of cards
自举4，panels已经下降了赞成cards
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>回答by Abu Bakr
Hit: ctrl+shift+i or Right click and choose inspect then click on console to make sure you dont have issue and The bootstrab JavaScript file is called and but that code in html file
点击：ctrl+shift+i 或右键单击并选择检查然后单击控制台以确保您没有问题并且调用了引导程序 JavaScript 文件，但是该代码在 html 文件中
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
but your bootstrap.js file at the end of body tag
但是你的 bootstrap.js 文件在 body 标签的末尾
回答by Alonso Contreras
i suggest you add a all panel items, i think you should add panel-heading and panel-footer and in addition to a container.
我建议你添加一个所有面板项目，我认为你应该添加面板标题和面板页脚以及一个容器。
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<div class="panel panel-default">
<div class="panel-heading">
<p>This a title</p>
</div>
<div class="panel-body">
Basic panel example
</div>
<div class="panel-footer">
<button class="btn btn-success">test</button>
</div>
</div>
</div>
</div>
</body>
