Question

我有以下代码：

<div class="row">
   <div class="col-xs-3 col-sm-3">
        <div class="form-group">
              <input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry1" placeholder="xxxx">
        </div>  
   </div>
   <div class="col-xs-3 col-sm-3">
        <div class="form-group">
             <input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry2" placeholder="xxxx">
        </div>  
   </div>
   <div class="col-xs-3 col-sm-3">
        <div class="form-group">
             <input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry3" placeholder="xxxx">
        </div>  
    </div>
  <div class="col-xs-3 col-sm-3">
        <div class="form-group">
             <input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry4" placeholder="xxxx">
        </div>  
  </div>

哪个看起来不错，但我的客户想要 - 在第一个，第二个和第三个文本字段之间，我无法弄清楚如何使用bootstrap来保持其响应性。

像这样：

[] - [] - [] - []

我尝试在输入结束时输入 - 但它根本不起作用。它看起来像这样：http://i.imgur.com/s92TPqx.jpg

所有课程card-input都会text-align:center

Answer 1

您可以尝试使用此快速提示（here is the fiddle）

.col-xs-3 + .col-xs-3:before {
    content: "-";
    position: absolute;
    left: -2%;
    top: 6px;
}

最好创建一个特定的类，不要在选择器中使用.col-xs-3

使用bootstrap网格输入信用卡之间的破折号

1 个答案: