样式和中心条纹按钮

Question

我正在尝试对条纹结帐按钮进行居中并设置样式，该按钮上显示更新卡。我也想让卡号输入看起来正常但只读我知道禁用的外观是引导程序，但我怎么能只使用类修复它？

<div class="page-header">
  <h3>Payment Details</h3>
</div>
<form role="form" id="cardForm" action="/user/billing" method="POST" class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Card Number</label>
    <div class="col-sm-4">
      <input id="card-num" type="text" class="form-control" placeholder="XXXX XXXX XXXX {{user.stripe.last4}}" name="card" readonly>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <div id="cardFormError" class="alert alert-danger hidden" role="alert">
        <p></p>
      </div>
    </div>
  </div>

  </div>
</form>

<form action="/user/billing" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT"
    data-amount=""
    data-name="Asset Management"
    data-description="Update your card details"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-currency="usd"
    data-label="Update Card"
    data-zip-code="true"
    data-allow-remember-me="false"
    data-email="{{user.email}}">
  </script>
</form>

Answer 1

喜欢这个？添加以下行：

<style>
  .form-control[readonly] {
    background-color: #fff;
  }
  .text-center {
    text-align: center;
  }
</style>

在<form action="/user/billing" method="POST">添加class="text-center"。像这样：<form action="/user/billing" class="text-center" method="POST">。

Answer 2

要实现上述效果，请将text-align: center;应用于body，

body {
  text-align: center;
}

将background-color: white !important;应用于.form-control，

.form-control {
  background-color: white !important;
}

将margin: 0 auto;应用于divs。

div {
  margin: 0 auto;
}

您可能还应该删除第一个表单末尾的额外关闭div标签。

＆＃13;

＆＃13;

.form-control {
  background-color: white !important;
}
body {
  text-align: center;
}
div {
  margin: 0 auto;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
  <h3>Payment Details</h3>
</div>
<form role="form" id="cardForm" action="/user/billing" method="POST" class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Card Number</label>
    <div class="col-sm-4">
      <input id="card-num" type="text" class="form-control" placeholder="XXXX XXXX XXXX {{user.stripe.last4}}" name="card" readonly>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <div id="cardFormError" class="alert alert-danger hidden" role="alert">
        <p></p>
      </div>
    </div>
  </div>
</form>

<form action="/user/billing" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT" data-amount="" data-name="Asset Management" data-description="Update your card details" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto" data-currency="usd" data-label="Update Card" data-zip-code="true" data-allow-remember-me="false" data-email="{{user.email}}">

  </script>
</form>

＆＃13;

＆＃13;

＆＃13;

（条带不会在代码段中弹出，但完全相同的代码在CodePen和JSFiddle中正常工作）

CodePen示例：https://codepen.io/AquatuzMagnus/pen/QqBQVj
JSFiddle示例：https://jsfiddle.net/sLueh77q/