Question

我一直在处理此表单，但是现在很难使事情正确排成一行。在较小的尺寸上，这并不是什么大问题，但是在大屏幕上，该问题非常明显。

我发现的两个主要问题是，我有一些社交链接正在某处获得额外的间隔，尽管我看不到它们之间有填充或空白。同样，实际形式本身并没有填充整个空间。我不能完全确定如何解决此处的间距问题。

有人提供任何提示吗？

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

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

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

edit 我正在尝试实现的布局图像。 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页面之间的不一致，我相信问题在于引导程序实现其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，上方还有更多基于弹性的细节，here）。

如您所见，他们将flex basis设置为50％。将jsfiddle和gitpages的flex属性都设置为flex: 0 0 auto后，这两个页面上的间距都是一致的，这让我想知道flex-basis是否正在计算50％作为一个值在JSFiddle中，在Github页面中另一个值。对于解决方案，您可以做的是创建一个自定义类，假设为.cust-col-md-6，然后复制引导程序定义的规则集，但是将属性的flex-basis更改为auto：

@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">

自举表格间距

1 个答案: