css - Square 支付表单 CSS 问题

Question

我正在将 Square 付款表单添加到现有的 ejs 文件中。将方形 html 添加到页面后，我的 Bootstrap 导航栏 anchor 标记不再起作用，但只能在导航栏中间的 anchor 标记上起作用。外部链接有效。添加方形表单后，下拉菜单也会被禁用。如果我注释掉 Square 表单，导航栏功能将恢复正常， anchor 标记也是如此。

我试过在导航栏和 Square 支付表单周围添加一个 div，但无济于事。我也尝试在 CSS 中为所有元素添加填充，但结果相同。可能是 Square javascript 文件触发了 iframe 的行为吗？它可能与 Bootstrap 有冲突吗？

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">Friends of Roam</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/mission">Our Mission<span class="sr-only">(current)</span></a>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="https://tranquil-caverns-74813.herokuapp.com/">Roam Music School</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/communityOutreach">Community Outreach</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="/successStories">Success Stories</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="/board">Our Board Members</a>
      </li>

     <li class="nav-item">
        <a class="nav-link" href="/contact">Contact Us</a>
      </li>

        <br>

      <li class="nav-item active">
        <a class="nav-link" href="/square">Donate Today</a>
      </li>
    </ul>
  </div>
</nav>


<h2 class ="text-center">Thank you for supporting the arts in our community!</h1>

<div id="form-container">
  <div id="sq-ccbox">

    <form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post">
      <fieldset>
        <span class="label">Card Number</span>
        <div id="sq-card-number"></div>

        <div class="third">
          <span class="label">Expiration</span>
          <div id="sq-expiration-date"></div>
        </div>

        <div class="third">
          <span class="label">CVV</span>
          <div id="sq-cvv"></div>
        </div>

        <div class="third">
          <span class="label">Postal</span>
          <div id="sq-postal-code"></div>
        </div>
      </fieldset>

      <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Donate $1.00</button>

      <div id="error"></div>

      <input type="hidden" id="card-nonce" name="nonce">
    </form>
  </div> <!-- end #sq-ccbox -->

</div> <!-- end #form-container -->

CSS:

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, html {
  color: #373F4A;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}


iframe {
  margin: 0;
  padding: 0;
  border: 0;
}

button {
  border: 0;
}

hr {
  height: 1px;
  border: 0;
  background-color: #CCC;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

h2 {
  padding-top: 20px;
}

/*.navbar {*/
/*  padding-bottom: 10px;*/
/*}*/

#form-container {
  padding-top: 400px;
  position: relative;
  width: 380px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

.label {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5;
  text-transform: uppercase;
}

.third {
  float: left;
  width: calc((100% - 32px) / 3);
  padding: 0;
  margin: 0 16px 16px 0;
}

.third:last-of-type {
  margin-right: 0;
}

/* Define how SqPaymentForm iframes should look */
.sq-input {
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  border-radius: 4px;
  outline-offset: -2px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out, background .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out, background .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out, background .2s ease-in-out;
          transition: border-color .2s ease-in-out, background .2s ease-in-out;
}

#sq-ccbox {
  padding-top: 20px;
}

/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
  border: 1px solid #4A90E2;
  background-color: rgba(74,144,226,0.02);
}


/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
  border: 1px solid #E02F2F;
  background-color: rgba(244,47,47,0.02);
}

#sq-card-number {
  margin-bottom: 16px;
}

/* Customize the "Donate with Credit Card" button */
.button-credit-card {
  width: 100%;
  height: 56px;
  margin-top: 10px;
  background: #4A90E2;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}

.button-credit-card:hover {
  background-color: #22F022;
}


#error {
  width: 100%;
  margin-top: 16px;
  font-size: 14px;
  color: red;
  font-weight: 500;
  text-align: center;
  opacity: 0.8;
}

Answer 1

第一个问题是 Square 支付表单的 CSS 设置为 margin:auto；

当我将边距分别添加到顶部和两侧时，问题就消失了。

#form-container {
  margin-top: 150px;
  position: relative;
  width: 380px;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
}

下拉菜单的第二个问题是我没有在头部包含 Bootstrap JS cdn。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>