Question

我正在尝试使用bootstrap创建一个表单。这是我的源代码：

<div class="container">
<form action="" method="post" id="payment-form" novalidate autocomplete="on">
<span class="payment-errors"></span>

  <div class="form-group">
    <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
    <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required class="col-md-2">
  </div>

 <div class="form-group">
    <label for="cc-exp" class="control-label">Card expiry formatting</label>
    <input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">
  </div>

  <div class="form-group">
    <label for="cc-cvc" class="control-label">Card CVC formatting</label>
    <input id="cc-cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required class="col-md-2">
  </div>

  <button type="submit" class="btn btn-lg btn-primary">Submit</button>

  <h2 class="validation"></h2>
</form>
</div>

我想做尺寸=＆＃34; 30＆＃34;对于领域。但是这些字段仍然太大，这个尺寸不会对字段产生影响。我应该做些什么改变？

Answer 1

请使用此课程 col-md-3或col-md-2。请使用width =“30px”，希望这对您有所帮助。编辑：如果div是你的主要标签，那么把代码放在

<div class="form-group">
        <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
        <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" class="col-md-3">
      </div>

or you can use width like


<div class="form-group">
        <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
        <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" style="width:30px !important">
      </div>

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap

如果您有任何疑惑，请告诉我。谢谢

如何使用bootstrap设置表单字段大小？

1 个答案: