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中并设置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％。

Answer 3

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

您可以添加此css来赚取利润，您可以根据需要在两个属性中增加值30px 例如{max-width：calc（50％-50px）！Important;} {margin-right：30px;}

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

3 个答案: