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>

这段代码应该看起来不错，但是＆＃34; card-header＆＃34;不......有什么想法吗？

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

screen example

Answer 1

在引导程序代码中它表示＆＃34;可以通过向元素添加.card-header来设置卡片标题。＆＃34;

https://v4-alpha.getbootstrap.com/components/card/

将div更改为h3或h *元素，它应该可以正常工作。

＆＃13;

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

Answer 2

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

在网格布局中，内容必须仅放在列中列可以是行的直接子项

使用一个工作示例检查代码段。

＆＃13;

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

Bootstrap卡头不起作用

2 个答案: