自适应占位符和引导输入组

Question

我正在尝试在我的页面上使用自适应占位符CSS文件 - 它适用于文本和选择输入但是当我尝试将它与bootstraps输入组一起使用时，它只是不起作用。

我创建了一个bootply来显示我的意思bootply（中间的是我希望它看起来像）

这是不采用自适应占位符的输入组

<div class="row">
    <div class="col-sm-6">
        <div id="divSupplierInput2" class="input-group">
            <input class="form-control" type="text" id="Text2" name="txtSupplier" value="" runat="server"
                required="">
            <label for="txtSupplier" placeholder="Supplier">
            </label>
            <span class="input-group-btn">
                <button class="btn btn-secondary btn-sm" type="button">
                    ...</button>
            </span>
        </div>
    </div>
</div>

这是一个可以正常工作的输入

<div class="row">
<div class="col-sm-6">
    <input id="Text1" type="text" class="form-control input-sm" runat="server" required="">
    <label for="txtInvoiceNumber" placeholder="Invoice Number">
    </label>
</div>

任何帮助都会非常感激，欢呼

Answer 1

使用两个div， col-sm-5 adjust-span-left 和 col-sm-1 adjust-span-right 。 你也可以根据你想要的时间使用col-sm-6到col-sm-11。 注意我分别将 adjust-span-left 和 adjust-span-right 添加到div，现在使用CSS相应地调整它：

.adjust-span-right{
  margin-left: -40px;
}
/* To make it responsive to smaller screens add this */
@media screen and (max-width: 780px) {
  .adjust-span-left{
  float:left;
  width:90%;
  overflow:hidden;
  }
  .adjust-span-right{
  float:left;
  width:10%;
  overflow:hidden;
  } 
}

然后使用此输入

<div class="row">
  <div class="col-sm-5 adjust-span-left">
    <input id="txtInvoiceNumber" type="text" class="form-control input-sm" runat="server" required="">
    <label for="txtInvoiceNumber" placeholder="Invoice Number">
    </label>
  </div>
  <div class="col-sm-1 adjust-span-right">
    <span class="input-group-btn">
        <button class="btn btn-secondary btn-sm" type="button">
            ...
        </button>
    </span> 
  </div>
</div>

修改 我注意到占位符在焦点上没有显示在较小的屏幕上，因此您还应该在响应式CSS样式中调整css。

类似的东西：

@media screen and (max-width: 780px) {
 input[type="text"][required]:focus + label[placeholder]:before,
 input[type="text"][required]:valid + label[placeholder]:before {
   /* Adjust the css accordingly */
  -webkit-transform: translate(6px, -10px);
  -ms-transform: translate(6px, -10px);
  transform: translate(8px, -10px);
 }
}