Bootstrap 4.1 Cards Styling - PullRequest
Новая
       4

Bootstrap 4.1 Cards Styling

0 голосов
/ 09 сентября 2018

У меня есть этот код: 

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

Я очень мало знаю о разработке интерфейса. Это кривая обучения для меня.

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Чтобы добиться этого с помощью служебных классов макета 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>

Обратите внимание, что название вашего текущего вопроса не слишком хорошо относится к актуальной проблеме. Вы в основном задаете вопрос утилиты макета. Все, что вы помещаете в свой макет, не имеет отношения к решению / ответу на него.

0 голосов
/ 09 сентября 2018

Я думаю, это то, что вы хотите 

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