css - Bootstrap 表单间距

Question

我一直在处理此表单，但现在无法正确排列所有内容。在较小的尺寸上问题不大，但在大屏幕上问题非常明显。

我发现的两个主要问题是我有一些社交链接从某处获得了额外的间距，尽管我可以看到它们之间没有填充或边距。此外，实际形式本身并没有填满整个空间。我不确定如何解决此处的间距问题。

有人提供任何提示吗？

这是保存到 SO 和 Jsfiddle 的代码的 JsFiddle 代码完全相同，尽管看起来它们给出了不同的结果。不知道为什么，但很明显我可能在这里搞砸了。

https://jsfiddle.net/Tsukiyono/aq9Laaew/283640/

这是另一个显示我的 gitpages 链接上的内容的链接: https://tsukiyonocm.github.io/test/

编辑 我试图实现的布局图像。 https://imgur.com/a/al8KEMh

body {
  background-color: black;
}


/** Contact
---------------------------------------------------------*/

#contactus {
  color: black;
  max-height: 62.5rem;
  width: auto;
}

.contact-title {
  font-family: futura-pt-condensed, sans-serif;
  font-weight: 700;
  padding: 1rem 0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.custom-contact {
  max-height: 15rem;
}

.social {
  font-weight: 700;
}

.custom-social {
  max-height: 15rem;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.social-contact ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
}

.social-contact ul li {
  padding: 0 1rem;
}

.btn-sub {
  letter-spacing: 1.5;
  color: black;
  background-color: #fff;
  font-weight: 700;
  border-radius: 0.15rem;
  white-space: normal;
}

.btn-form {
  width: 100%;
  letter-spacing: 1.5;
  color: black;
  background-color: #fff;
  font-weight: 700;
  border-radius: 0.15rem;
}

form {
  max-width: 100%;
  margin: 0 .5rem;
}

.form-control {
  background-color: rgb(46, 46, 46);
  border: 1px solid white;
  border-radius: 0.2rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="contactus">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1 class="display-3 contact-title">Contact Us</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="row contact-info d-flex flex-md-row flex-lg-column">
          <div class="col-12 col-md-6 custom-contact">
            <h3>- Our Office -</h3>
            <address>
                                SOCKEROO Marketing<br>
                                123 Address Rd.<br>
                                Pittsburgh, PA<br>
                                15222<br>
                                <a href="tel:+555-555-5555">TEL - 555.555.5555</a><br>
                                <a href="mailto:sockeroomarketing@gmail.com">Email - sockeroomarketing@gmail.com</a>
                            </address>
          </div>

          <div class="col-12 col-md-6 custom-social">
            <p class="social">- Say Hello -</p>
            <div class="social-contact">
              <ul class="">
                <li><a href="#"><i class="fab fa-inverse fa-twitter-square fa-lg"></i></a></li>
                <li><a href="#"><i class="fab fa-inverse fa-facebook-square fa-lg"></i></a></li>
                <li><a href="#"><i class="fab fa-inverse fa-linkedin fa-lg"></i></a></li>
                <li><a href="#"><i class="fab fa-inverse fa-instagram fa-lg"></i></a></li>
              </ul>
            </div>
            <button class="btn btn-sub">Subscribe to Our Newsletter</button>
          </div>

        </div>
      </div>

      <div class="col-12 col-lg-6 m-0 p-0">
        <form action="">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Company or Organization">
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email Address">
          </div>
          <div class="form-group">
            <input type="tel" class="form-control" placeholder="Phone Number">
          </div>
          <div class="form-group">
            <textarea name="comment" class="form-control" placeholder="Tell us a bit about your project, timeline, and budget"></textarea>
          </div>
          <button class="btn btn-form">Submit</button>
        </form>
      </div>
    </div>

  </div>
</section>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

关于 JSFiddle 和 Github 页面之间的不一致，我认为问题在于 bootstrap 实现它们的 col-md-6 类的方式。即，flex-basis 属性。

作为引用，这是我所看到的他们的类，基于 chrome 中的元素检查器:

@media (min-width: 768px)
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

(一点上下文:flex 是定义 flex-grow、flex-shrink 和 flex-basis，按此顺序。您可以在这篇关于 CSS 技巧的文章中找到该信息:here 以及其上方关于 flex 基础的更多详细信息，here)。

如您所见，他们将 flex basis 设置为 50%。一旦我将 jsfiddle 和 gitpages 的 flex 属性都设置为 flex: 0 0 auto，这两个页面上的间距是一致的，这让我想知道 flex-basis 将 50% 计算为 JSFiddle 中的一个值和 Github 页面中的另一个值。至于解决方案，您可以做的是创建一个自定义类，比方说 .cust-col-md-6，然后复制 bootstrap 定义的规则集，但更改属性的 flex-basis到自动:

@media (min-width: 768px)
.cust-col-md-6 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 50%;
}

然后从这里您可以将其设置为您的类，而不是使用 .col-md-6:

<div class="col-12 cust-col-md-6 custom-social">