引导卡头不起作用

Question

我正在使用 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>

那段代码应该看起来不错，但“卡片标题”不...有什么想法吗？

PD：即使是基本示例（由文档提供）也不适合我...

screen example

Answer 1

我不确定这是否会破坏您的布局，但您不应将 row 和 col 类放在一个容器上。来自bootstrap docs：

在网格布局中，内容必须放在列内，并且只能 列可能是行的直接子代

用一个工作示例检查 sn-p。

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

Answer 2

在引导代码中它说“可以通过向元素添加 .card-header 来设置卡片标题的样式。”

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>