Уменьшение расстояния между столбцами - Bootstrap 4

Question

Я пытаюсь встроить два веб-сайта на свой сайт. Моя цель - отображать эти веб-сайты рядом друг с другом в iframe нестандартного размера, реагируя на размер порта просмотра. Я использую Bootstrap 4 функции столбцов и строк, чтобы попытаться выполнить sh это. Однако расстояние между столбцами слишком велико:

Note this is a previously asked question and I have looked at the Посещенный форум A и ПосмотрелФорумB , однако ни один из них не помог решить мою проблему.

код:

<div class="col-auto mb-3">
  <div class="card" style="border: none;">
    <div class="card-body">
      <div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
        <div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
          <b>EXAMPLE WEBSITE
                        <span style="float: right; font-size: 20px;">
                            <a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
                                <i class="fas fa-expand"></i>
                            </a>
                        </span>
                    </b>
        </div>
        <div class="card-body" style="padding: 0;">
          <iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
```

Answer 1

Вы можете использовать класс .no-gutters, чтобы сбить интервал между столбцами. Я бы сделал это в той же строке, что и ваша строка, поэтому в основном:

<div class="row no-gutters">

Answer 2

В вашем случае - ключевым элементом является добавление отступов и полей к классам .card и .card-body. Посмотрите ниже, что произойдет, если вы замените поля и отступы на 0. Большой зазор исчезнет, ​​и вы можете управлять им, добавив свои собственные отступы и поля в зависимости от того, насколько большой зазор между столбцами вы хотите создать. Код ниже:

<div class="container">
<div class="row">

    <div class="col-6 m-0 p-0">
    <div class="card m-0 p-0" style="border: none;">
        <div class="card-body m-0 p-0">
            <div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
                <div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
                    <b>EXAMPLE WEBSITE
                        <span style="float: right; font-size: 20px;">
                            <a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
                                <i class="fas fa-expand"></i>
                            </a>
                        </span>
                    </b>
                </div>
                <div class="card-body" style="padding: 0;">
                    <iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-6 m-0 p-0">
    <div class="card p-0 m-0" style="border: none;">
        <div class="card-body p-0 m-0">
            <div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
                <div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
                    <b>EXAMPLE WEBSITE
                        <span style="float: right; font-size: 20px;">
                            <a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
                                <i class="fas fa-expand"></i>
                            </a>
                        </span>
                    </b>
                </div>
                <div class="card-body" style="padding: 0;">
                    <iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>


</div>
</div>

Другая возможность - перекомпилировать bootstrap из s css и переопределить отступы и поля столбцов в источнике. Это, вероятно, было бы более чистым решением, но потребовало бы немного больше времени.