Bootstrap 4.1 卡片样式答案

【问题标题】：Bootstrap 4.1 Cards StylingBootstrap 4.1 卡片样式
【发布时间】：2018-09-09 18:51:26
【问题描述】：

我有这个代码：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Employee Information</div>

                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <td scope="row">First Name: </td>
                                <td>{{ $employee->first_name }}</td>
                            </tr>
                            <tr>
                                <td scope="row">Last Name: </td>
                                <td>{{ $employee->last_name }}</td>
                            </tr>
                            <tr>
                                <td scope="row">ID Number: </td>
                                <td>{{ $employee->id_number }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">External Training Records</div>

                <div class="card-body">
                    External Training Records:
                </div>
            </div>
        </div>
        <div class="col-md-8 offset-md-4">
            <div class="card">
                <div class="card-header">Clients</div>

                <div class="card-body">
                    Clients:
                </div>
            </div>
        </div>
        <div class="col-md-8 offset-md-4">
            <div class="card">
                <div class="card-header">Site</div>

                <div class="card-body">
                    Sites
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/aq9Laaew/206869/

我希望右侧的两个部分（外部培训和客户）位于彼此下方（在桌面上时）。如何在 Bootstrap 中做到这一点？

我对前端开发知之甚少。这对我来说是一个学习曲线。

【问题讨论】：

你想要的是this吗？
这正是我想要的@AndreiGheorghiu 能否请您提交答案，我会将其标记为正确

标签： css laravel twitter-bootstrap frontend

【解决方案1】：

要使用 Bootstrap 布局实用程序类来实现这一点，您只需将所有卡片放在一列中，而不是为每张卡片添加一行：

<div class="row">
  <div class="col-lg-4">
    ... your left column card here...
  </div>
  <div class="col-lg-8">
    ... rest of your cards here...
  </div>
</div>

工作示例：

.row {
  background: #f8f9fa;
}

.col {
  border: solid 1px #6c757d;
}
.card {
  margin-top: 15px;
}
.card + .card:last-child {
 margin-bottom: 15px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-5">
      <div class="card">
        <div class="card-header">Employee Information</div>
        <div class="card-body">
          <table class="table table-borderless">
            <tbody>
              <tr>
                <td scope="row">First Name: </td>
                <td>Jane</td>
              </tr>
              <tr>
                <td scope="row">Last Name: </td>
                <td>Doe</td>
              </tr>
              <tr>
                <td scope="row">ID Number: </td>
                <td>123456789123</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-8 col-md-7">
      <div class="card">
        <div class="card-header">External Training Records</div>

        <div class="card-body">
          External Training Records:
        </div>
      </div>
      <div class="card">
        <div class="card-header">Clients</div>

        <div class="card-body">
          Clients:
        </div>
      </div>
      <div class="card">
        <div class="card-header">Site</div>

        <div class="card-body">
          Sites
        </div>
      </div>
    </div>
  </div>
</div>

请注意，您当前的问题标题与实际问题不太相关。你基本上是在问一个布局实用程序问题。无论您在布局中放置什么，都与解决/回答它无关。

【讨论】：

【解决方案2】：

我想这就是你想要的

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Employee Information</div>

                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <td scope="row">First Name: </td>
                                <td>Jane</td>
                            </tr>
                            <tr>
                                <td scope="row">Last Name: </td>
                                <td>Doe</td>
                            </tr>
                            <tr>
                                <td scope="row">ID Number: </td>
                                <td>123456789123</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">External Training Records</div>

                <div class="card-body">
                    External Training Records:
                </div>
            </div>
            <div class="card">
                <div class="card-header">Clients</div>

                <div class="card-body">
                    Clients:
                </div>
            </div>
        </div>
        <div class="col-md-8 offset-md-4"></div>
        <div class="col-md-8 offset-md-4">
            <div class="card">
                <div class="card-header">Site</div>

                <div class="card-body">Sites</div>
            </div>
        </div>
    </div>
</div>

【讨论】：