Question

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

我尝试在导航栏以及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>

Square Payment表格CSS问题

1 个答案: