Question

我有此代码：

<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中做到这一点？

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

Answer 1

我想这就是你想要的

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

Answer 2

要使用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>

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

Bootstrap 4.1卡样式

2 个答案: