如何使用引导程序设置表单字段大小？

Posted 2023-03-06

【中文标题】如何使用引导程序设置表单字段大小？

【英文标题】：How to set form fields size with bootstrap?

【发布时间】：2016-02-27 11:35:06

【问题描述】：

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

<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>

我想为字段设置 size="30"。但是字段仍然太大，这个大小不会影响字段。我应该做些什么改变？

【问题讨论】：

能否在您的实际问题中包含您的源代码？

尝试使用他们的网格系统来布置表格。例如，您可以将字段包装在 div 中，并将类设置为col-md-3。只需将 3 替换为您需要的任何宽度。

究竟在哪里使用该类？内部输入标签？还是在输入标签周围的 div 标签内？

请指教如何将上面源代码中的 span form-errors 的错误消息设为红色？

【参考方案1】：

请使用这个类 col-md-3 或 col-md-2。请使用 ，希望对您有所帮助。 编辑： 如果 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

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

【讨论】：

究竟在哪里使用该类？内部输入标签？还是在输入标签周围的 div 标签内？

什么是 x 是 col-md-x？这是px？例如 col-md-2 实际上表示 20px 而 col-md-4 表示 40px？

请看我的编辑。我认为这将有助于您了解 col-md-x 等的区别

谢谢。那么 col-md-3 是指屏幕宽度的 1/4 吗？

抱歉，它们都不起作用，请复制/粘贴我的代码并进行实时测试，并建议那里出了什么问题？