Как добавить пробел между полем для текста и HTML-формой, которую я создал здесь в boostrap?

Question

Я бы хотел, чтобы между ними было какое-то пространство.Вот изображение нижнего колонтитула, о котором идет речь, на imgur.

Я попытался добавить поле справа в поле детализации, но оно просто сдвигает HTMLФорма под ним.Кто-нибудь может помочь?Заранее спасибо.

<footer class="page-footer red">
  <div class="container">

    <div class="row">
      <div id="detail-box" class="col-md-6">
        <h5 class="font-weight-bold adres"><i class="fas fa-map-marker-alt"></i>Adres</h5>
        <p>Kıbrısonline Lefkoşa Merkez Ofisi, Bedreddin Demirel Cad. Arabacıoğlu APT. no:121 Yenişehir - Lefkoşa - P.K. 500 Mersin 10 TURKEY</p>
        <h5 class="font-weight-bold merkez"><i class="fas fa-phone-volume"></i>Cagri Merkezi</h5>
        <p>+90 (392) 444 0 433</p>
        <h5 class="font-weight-bold email"><i class="fas fa-envelope-square"></i>Email</h5>
        <p>hizmet@kibrisonline.com</p>
        <h5 class="font-weight-bold email"><i class="fas fa-envelope"></i>Email</h5>
        <p>kurumsal@kibrisonline.com</p>

        <h5 class="font-weight-bold">Bizi Takip Edin:</h5>
        <span><a href="#" class="text-white"><i class="icons icon-social-instagram footer-icon"></i></a></span>
        <span><a href="#" class="text-white"><i class="icons icon-social-facebook footer-icon"></i></a></span>
        <span><a href="#" class="text-white"><i class="icons icon-social-twitter footer-icon"></i></a></span>
        <span><a href="#" class="text-white"><i class="icons icon-social-linkedin footer-icon"></i></a></span>


      </div>
      <div class="col-md-6">
        <form action="" class="row">
          <div class="col-md-6 py-1">
            <input type="text" class="form-control" name="Ad" placeholder="Adiniz*">
          </div>
          <div class="col-md-6 py-1">
            <input type="text" class="form-control" name="Soyad" placeholder="Soyadiniz*">
          </div>
          <div class="col-md-6 py-1">
            <input type="email" class="form-control" name="E-posta" placeholder="E-posta*">
          </div>
          <div class="col-md-6 py-1">
            <input type="tel" class="form-control" name="Telefon" placeholder="Telefon*">
          </div>
          <div class="col-md-12 py-1">
            <textarea class="form-control" name="Mesaj" placeholder="Mesajiniz*"></textarea>
          </div>

        </form>

        <button id="gonder" type="button" class="btn btn-outline-danger"><i class="far fa-paper-plane"></i>Gonder</button>


      </div>

    </div>
    <hr class="border-white" />
    <div class="row align-items-center">
      <div class="col-4">
        <img src="/assets/img/kol-logoldpi2.svg" class="img-fluid" />
      </div>
      <div class="col">
        <div class="copyright">
          <p>© 2018 Copyright Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          <p>Made with <span style="color: #e25555;">&#9829;</span> by a man from The United Kingdom of Great Britain and Northern Ireland.</p>
        </div>
      </div>
    </div>
  </div>

Answer 1

Вот решение с использованием flexbox:

https://codepen.io/anon/pen/QXgyWQ

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <div style="background: blue;">
        left
      </div>
    </div>
    <div class="col-md-6 ml-auto">
      <div style="background: red;">
        left
      </div>
    </div>
  </div>
</div>

Answer 2

div#detail-box {
    max-width: calc(50% - 30px) !important;
    margin-right: 30px;
}

Вы можете добавить этот CSS для создания права на маржу. Вы можете увеличить значение, равное 30px, в соответствии с вашими потребностями в собственности. пример {max-width: calc (50% - 50px)! Важно;} {Маржа правый: 30px;}

Answer 3

Вы можете обернуть этот раздел в div и установить max-width.Примерно так:

<div id="detail-box" class="col-md-6">
     <div class="detail-box-wrapper" style="max-width: 300px;"> 
        <!-- rest of your codes -->
     </div>            
</div>

Вы можете установить ширину 100% на экранах небольшого размера.