我正在使用Laravel 5.5并查看Bootstrap的4文档,我发现卡组件对于我想要做的事情来说效果很好。无论哪种方式,在我尝试创建基本卡片模型时出现错误:
<div class="container">
<div class="row col-md">
<div class="card">
<div class="card-header">
Companies
</div>
<ul class="list-group list-group-flush">
<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>
</div>
</div>
这段代码应该看起来不错,但是&#34; card-header&#34;不......有什么想法吗?
PD:即使是基本的例子(由文档提供)也不适合我...
答案 0 :(得分:0)
在引导程序代码中它表示&#34;可以通过向元素添加.card-header来设置卡片标题。&#34;
https://v4-alpha.getbootstrap.com/components/card/
将div更改为h3或h *元素,它应该可以正常工作。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
<div class="row col-md">
<div class="card">
<h2 class="card-header">
Companies
</h2>
<ul class="list-group list-group-flush">
<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>
</div>
</div>
&#13;
答案 1 :(得分:0)
我不确定这是否会破坏您的布局,但您不应将 row 和 col 类放在一个容器上。来自bootstrap docs:
在网格布局中,内容必须仅放在列中 列可以是行的直接子项
使用一个工作示例检查代码段。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="margin: 50px">
<div class="card-header">
Companies
</div>
<ul class="list-group list-group-flush">
<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>
</div>
</div>
</div>
&#13;