中心我的页面中的引导程序表单

时间:2016-08-04 19:31:38

标签: css forms twitter-bootstrap center

我有以下代码,它不会粘在页面中间。我尝试了很多CSS技巧,让它到达页面的中心,但我不能。有什么建议吗?我应该将什么添加到CSS中,以便它出现在m页的中间?

<head>
  <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="buynow.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8" />
  <title>CrowdLinker</title>
</head>

<div class="container">
  <div class='row  '>
    <div class="col-md-6 offset-md-3 ">

      <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓" />
          <input name="_method" type="hidden" value="PUT" />
          <input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group required'>
            <label class='control-label'>Name on Card</label>
            <input class='form-control' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group card required'>
            <label class='control-label'>Card Number</label>
            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
              Total:
              <span class='amount'>$300</span>
            </div>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 error form-group hide'>
            <div class='alert-danger alert'>
              Please correct the errors and try again.
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class='col-md-4'></div>
  </div>
</div>

2 个答案:

答案 0 :(得分:0)

您可以使用CSS规则执行此操作,但此处它是内联样式:

更改

<div class="container">

<div class="container" style="text-align:center">

结果:

&#13;
&#13;
<head>
  <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="buynow.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8" />
  <title>CrowdLinker</title>
</head>

<div class="container" style="text-align:center">
  <div class='row  '>
    <div class="col-md-6 offset-md-3 ">

      <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓" />
          <input name="_method" type="hidden" value="PUT" />
          <input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group required'>
            <label class='control-label'>Name on Card</label>
            <input class='form-control' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group card required'>
            <label class='control-label'>Card Number</label>
            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
              Total:
              <span class='amount'>$300</span>
            </div>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 error form-group hide'>
            <div class='alert-danger alert'>
              Please correct the errors and try again.
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class='col-md-4'></div>
  </div>
</div>
&#13;
&#13;
&#13;

Centered

答案 1 :(得分:0)

BOOTSTRAP FIX : 使用col-md-6 offset-md-3

替换form标记上方的col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-5 col-lg-offset-3

正常模式:

添加float: none !important; margin: 0 auto;

<head>
  <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="buynow.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="UTF-8" />
  <title>CrowdLinker</title>
</head>

<div class="container" style="text-align:center">
  <div class='row  '>
    <div class="col-md-6 offset-md-3 " style="float: none !important; margin: 0 auto;">

      <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓" />
          <input name="_method" type="hidden" value="PUT" />
          <input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group required'>
            <label class='control-label'>Name on Card</label>
            <input class='form-control' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-12 form-group card required'>
            <label class='control-label'>Card Number</label>
            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
          </div>
          <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12'>
            <div class='form-control total btn btn-info'>
              Total:
              <span class='amount'>$300</span>
            </div>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 form-group'>
            <button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
          </div>
        </div>
        <div class='form-row'>
          <div class='col-md-12 error form-group hide'>
            <div class='alert-danger alert'>
              Please correct the errors and try again.
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class='col-md-4'></div>
  </div>
</div>