html - 如何在文本框和我在 boostrap here 中创建的 html 表单之间添加空格？

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>